Frage Wie zentriere ich Text vertikal mit CSS?


Ich habe ein div-Element, das Text enthält, und ich möchte den Inhalt dieses div vertikal zentrieren.

Hier ist mein Div-Stil:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Was ist der beste Weg, dies zu tun?


1804
2018-01-14 21:25


Ursprung


Antworten:


Sie können diesen grundlegenden Ansatz ausprobieren:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Es funktioniert jedoch nur für eine einzelne Textzeile, weil wir die Höhe der Zeile auf die gleiche Höhe wie das umgebende Feld setzen.


Ein vielseitiger Ansatz

Dies ist eine weitere Möglichkeit, Text vertikal auszurichten. Diese Lösung funktioniert für eine einzelne Zeile und mehrere Textzeilen, erfordert jedoch weiterhin einen Container mit fester Höhe:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Das CSS passt nur die Größe an <div>, vertikal zentriert die Mitte <span> durch Einstellen der <div>die Zeilenhöhe entspricht seiner Höhe und macht die <span> ein Inline-Block mit vertical-align: middle. Dann setzt er die Zeilenhöhe wieder auf Normal <span>, so wird sein Inhalt natürlich innerhalb des Blocks fließen.


Simulation der Tischanzeige

Und hier ist eine andere Option, die bei älteren möglicherweise nicht funktioniert Browser, die nicht unterstützen display: table und display: table-cell (im Grunde nur Internet Explorer 7). Mit CSS simulieren wir Tabellenverhalten (da Tabellen die vertikale Ausrichtung unterstützen), und das HTML ist dasselbe wie im zweiten Beispiel:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Mit absoluter Positionierung

Diese Technik verwendet ein absolut positioniertes Element, das oben, unten, links und rechts auf 0 setzt. Es wird detaillierter in einem Artikel in Smashing Magazine beschrieben, Absolute horizontale und vertikale Zentrierung in CSS.


2447
2018-03-06 08:15



Ein anderer Weg (hier noch nicht erwähnt) ist mit Flexbox.

Fügen Sie einfach den folgenden Code hinzu Container Element:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox Demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Alternativ dazu, anstatt den Inhalt über die ContainerFlexbox kann das a auch zentrieren Flex-Artikel mit einem automatische Marge  wenn nur ein Flex-Element im Flex-Container vorhanden ist (wie das Beispiel in der obigen Frage).

Um den Flex-Gegenstand sowohl horizontal als auch vertikal zu zentrieren, setzen Sie ihn einfach mit margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: All das gilt für das Zentrieren von Gegenständen während des Auslegens horizontale Reihen. Dies ist auch das Standardverhalten, da standardmäßig der Wert für flex-direction ist row. Wenn jedoch Flex-Items angelegt werden müssen vertikale Spalten, dann flex-direction: column sollte auf den Container gesetzt werden, um die Hauptachse als Spalte und zusätzlich die justify-content und align-items Eigenschaften funktionieren jetzt umgekehrt mit justify-content: center Zentrierung vertikal und align-items: center horizontal zentriert)

flex-direction: column Demo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Ein guter Einstieg in Flexbox, um einige Funktionen zu sehen und Syntax für maximale Browser-Unterstützung zu erhalten Flexyboxen 

Auch der Browser-Support ist heutzutage sehr gut: kann ich benutzen

Für browserübergreifende Kompatibilität für display: flex und align-itemskönnen Sie Folgendes verwenden:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

956
2018-01-14 21:29



Sie können dies leicht tun, indem Sie den folgenden CSS-Code hinzufügen:

display: table-cell;
vertical-align: middle;

Das heißt, Ihr CSS sieht schließlich so aus:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


109
2017-10-25 18:12



Als Referenz und um eine einfachere Antwort hinzuzufügen:

Reines CSS:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Oder als SASS / SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Verwendung von:

.class-to-center {
    @include vertical-align;
}

Von Sebastian Ekströms Blogbeitrag Verändern Sie alles mit nur drei Zeilen CSS:

Diese Methode kann dazu führen, dass Elemente verschwimmen, weil das Element auf einem "halben Pixel" platziert ist. Eine Lösung für dieses Problem besteht darin, das übergeordnete Element auf "3d beibehalten" zu setzen. Wie folgt:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Wir leben in 2015+ und Flexbox wird von jedem modernen Browser unterstützt.

So werden Websites von nun an gemacht.

Lern es!


97
2017-08-11 11:59



Alle Kredite gehen an diesen Link Besitzer @ Sebastian Ekström Verknüpfung; Bitte gehen Sie das durch. Sehen Sie es in Aktion Codepen. Durch das Lesen des obigen Artikels habe ich auch erstellt eine Demo-Geige.

Mit nur drei CSS-Zeilen (ohne Vendor-Präfixe) können wir dies mit Hilfe einer Transformation tun: translateY zentriert vertikal, was wir wollen, auch wenn wir seine Höhe nicht kennen.

Die Transformation für CSS-Eigenschaften wird normalerweise zum Drehen und Skalieren von Elementen verwendet, aber mit der Funktion translateY können wir jetzt Elemente vertikal ausrichten. Normalerweise muss dies mit absoluter Positionierung oder Einstellung von Zeilenhöhen geschehen, aber diese erfordern, dass Sie entweder die Höhe des Elements kennen oder nur bei einzeiligen Texten usw. arbeiten.

Um dies zu tun, schreiben wir:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Das ist alles was du brauchst. Es ist eine ähnliche Technik wie bei der Methode der absoluten Position, aber mit dem Vorteil, dass wir keine Höhe für das Element oder die position-Eigenschaft des Elternelements festlegen müssen. Es funktioniert direkt aus der Box, sogar in Internet Explorer 9!

Um es noch einfacher zu machen, können wir es als Mixin mit seinen Herstellerpräfixen schreiben.


49
2017-12-13 20:09



Flexboxes, die in CSS3 eingeführt wurden, sind die Lösung:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Hinweis: Ersetzen Sie die Zeile, die als wichtig markiert wurde, durch eine dieser Zeilen, wenn Sie den Text zentrieren möchten:

1) Nur vertikal:

margin: auto 0;

2) Nur horizontal:

margin: 0 auto;

AKTUALISIEREN: Wie ich bemerkt habe, funktioniert dieser Trick auch mit Gittern (Anzeige: Gitter).


22
2017-08-28 10:11



Flexibler Ansatz

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26



Die als Antwort angenommene Lösung ist perfekt zu verwenden line-height das gleiche wie die Höhe von div, aber diese Lösung funktioniert nicht perfekt, wenn der Text umgebrochen wird ODER in zwei Zeilen.

Versuchen Sie dies, wenn der Text umgebrochen ist oder mehrere Zeilen innerhalb eines div enthält.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Weitere Informationen finden Sie unter:


13
2018-04-15 08:28