Jak mogę wyśrodkować tekst w pionie w dynamicznym polu różnicy wysokości?

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center;">Text</h1>
    </div>
</body>

Jak mogę wyśrodkować znacznik h1 wewnątrz znacznika div, bez względu na Wysokość elementu div? tzn. jeśli użytkownik zmieni wysokość przeglądarki, chcę, aby h1 wyrównał pionowo w środku, zgodnie z nową wysokością.

Dzięki.
Author: DannyG, 2012-06-08
Source

9 answers

Najlepszym rozwiązaniem, jakie kiedykolwiek spotkałem, jest użycie właściwości display i ustawienie elementu wrapper jako table, aby umożliwić użycie vertical-align:middle na elemencie do wyśrodkowania:

Zobacz też przykład pracy !

HTML 

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

CSS 

body {width: 100%; height: 100%;}   /* this is just to "view" the div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

TESTOWANE NA

Windows XP Professional 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • Opera 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

  • Internet Explorer 9.0.8112.164211 C
  • Opera 11.62
  • Firefox 12.0
  • Safari 5.1.4
  • Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

  • Firefox 12.0
    • [[29]}Chromium 18.0.1025.151 (Developer Build 130497 Linux)
 58
Author: Zuul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 20:42:08

Odpowiedź, którą uważam za najmniej natrętną i najmniej mylącą, wymaga Wstawienia znacznika <span> przed elementem <h1>: http://jsfiddle.net/Wexcode/axRxE/

HTML: 

<div>
    <span></span><h1>Text</h1>
</div>​

CSS: 

div { text-align: center; /* horizontally center */ }
div span {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
div h1 {
    vertical-align: middle;
    display: inline-block; }​

Rozszerzenie tej techniki do pionowego wyrównania do wysokości przeglądarki: http://jsfiddle.net/Wexcode/axRxE/1/

 17
Author: Wex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 21:49:05

Mam najłatwiejsze 3 linie css, które rozwalą twój umysł i będziesz myślał "dlaczego nie pomyślałem o tym początkowo". Użyj tego na elemencie, który chcesz umieścić pionowo, a kontener nadrzędny po prostu dodaj wysokość 100%.

position: relative;
top: 50%;
transform: translateY(-50%);

Pozycja może być względna, absolutna lub stała.

 4
Author: Tom McDonough,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-22 22:43:05

Http://jsfiddle.net/xQBbQ/ 

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
    </div>
</body>
 3
Author: Zoltan Toth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 20:25:26 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #0c0c0c;
}
.object {
    background-color: #666666;
    height: 350px;
    width: 600px;
}
.verticalCenter {
    width:600px;
    height:350px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
    <div class="verticalCenter">
        <div class="object">cetnered</div>
    </div>
</body>
</html>

Musisz ustawić wysokość i szerokość w .Klasa verticalCenter taka sama jak Twojego obiektu (div, flash, image, text), który ma być wyśrodkowany. Marginesy muszą być w połowie wysokości i szerokości.

Myślę, że nie ma rozwiązania, jeśli zmienisz ten obiekt dynamicznie. Chyba, że przy pomocy skryptów.

 1
Author: heroix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 20:30:27

Oto dość proste rozwiązanie. Opiera się głównie na ustawieniu display:table-cell i wybraniu wyrównania pionowego, takiego jak środek.

HTML: 

<div id="vertical">
    <p>this text is vertically centered.  It's long enough to wrap, and should work for any size chunk of content.</p>
    <p>Heck, it even works with multiple items in the middle.</p>
</div>​​

CSS: 

#vertical {
    display:table-cell;
    vertical-align:middle;
    height: 500px;
    width: 300px;
}​

JSFiddle: http://jsfiddle.net/6Re3E/1/

 1
Author: Surreal Dreams,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 20:33:19

Istnieje cross (desktop) browser solution aby to zrobić z CSS2 + CSS3 i bez żadnego Javascript.

Działa w

  • IE5+
  • Gecko (Mozilla, Firefox, Netscape 7)
  • Opera 7 +
  • Konqueror 3 +
  • Przeglądarki Webkit (Safari, Google Chrome)
    • [13]}i wiele więcej (przeglądarki mobilne nie testowane)

Documentation: Vertical Centering in CSS Definitive Solution with Unknown Height:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

przykład Clean jsFiddle: http://jsfiddle.net/WYgsP /

HTML 
<div class="outerBox">
    <div class="helper">
        <div class="boxWithUnknownHeight">
            any text<br>
            any height<br>
            any content, for example generated from DB<br>
            everything is vertically centered
        </div>
    </div>
</div>​

CSS 

.outerBox {
    display: table;
    height: 400px;
    #position: relative; /* ie hack */
    overflow: hidden;
    border: 1px solid red;
}

.helper {
    #position: absolute; /* ie hack */
    #top: 50%; /* ie hack */
    display: table-cell;
    vertical-align: middle;
}

.boxWithUnknownHeight {
    #position: relative; /* ie hack */
    #top: -50%;
    border: 1px solid green
}​

To działa, nawet jeśli dodam tekst i linijki-breaki przez Firebug itp.
aby zachować swój CSS czysty od nieprawidłowych CSS-Hacks, polecam użyć komentarze warunkowe dla niego i utworzyć oddzielny CSS z specyficzne dla przeglądarki Kod.

Jak dokładnie działa centrowanie pionowe o nieznanej wysokości i dlaczego: szczegółowy opis

Inne rozwiązania z display: table i lub display: table-celli lub absolutnym pozycjonowaniem tutaj.

 1
Author: doptrois,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:31:15

Używam tabel do wszystkiego. Ja osobiście nie lubię używać display: table lub czegoś podobnego, gdy istnieje coś, co już istnieje.

<table style="width: 100%; height: 100%;">
    <tr>
        <td>
            <!-- Whatever you want vertically and horizontally centered -->
        </td>
    </tr>
</table>

Używając tej samej metody, możesz zrobić coś takiego dla swojego przypadku: 

<div id="container-div" style="position: relative">
    <div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
    <div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td>
                    <!-- Whatever you want vertically and horizontally centered -->
                </td>
            </tr>
         </table>
     </div>
</div>
 0
Author: Superjova,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-17 13:57:34

Z mojego punktu widzenia, div nie jest właściwym wyborem w tym przypadku. Moja propozycja to go for table and vertical-align style on it ' s td S.

 -2
Author: Tooraj Jam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-07 20:26:03