Vertikales Zentrieren von Text in einem Div mithilfe von CSS

Erweiterte CSS-Techniken für die vertikale Zentrierung

Im dritten Skript verwenden wir die Tabellenanzeigemethode. Einstellung display: table; auf dem Behälter und display: table-cell; auf einem Pseudoelement, das mit erstellt wurde ::before ermöglicht es uns, das zu nutzen vertical-align: middle; Eigentum. Diese Methode ahmt das Verhalten von Tabellenzellen nach und ermöglicht so die vertikale Zentrierung von Inhalten. Während dieser Ansatz im modernen Webdesign weniger häufig verwendet wird, kann er für die Aufrechterhaltung der Kompatibilität mit älteren Browsern oder beim Umgang mit Legacy-Code nützlich sein. Es bietet eine zuverlässige Möglichkeit, Inhalte zu zentrieren, ohne auf neuere Layoutsysteme angewiesen zu sein.

Das vierte Skriptbeispiel verwendet die line-height Eigentum. Durch Einstellen der line-height gleich der Höhe des Containers ist, wird der Text vertikal zentriert. Diese Technik ist unkompliziert und effektiv für einzeiligen Text. Es ist jedoch möglicherweise nicht für mehrzeiligen Text oder dynamische Inhalte geeignet, bei denen sich die Höhe des Containers ändern kann. Trotz seiner Einschränkungen ist das line-height Die Methode ist eine schnelle und einfache Lösung zum vertikalen Zentrieren von Text in einfachen Szenarien.

Verwenden von Flexbox zur vertikalen Zentrierung

CSS-Flexbox

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

Verwenden des Rasters zur vertikalen Zentrierung

CSS-Raster

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

Verwenden der Tabellenanzeige zur vertikalen Zentrierung

CSS-Tabellenanzeige

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Verwenden der Linienhöhe zur vertikalen Zentrierung

CSS-Zeilenhöhe

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

Häufige Fragen zur vertikalen Zentrierung in CSS

1. Was ist der einfachste Weg, Text in einem Div vertikal zu zentrieren?
2. Benutzen display: flex; mit justify-content: center; Und align-items: center; ist oft die einfachste und effektivste Methode.
3. Wie zentriert man Text in älteren Browsern vertikal?
4. Verwendung der Tabellenanzeigemethode mit display: table; Und vertical-align: middle; kann dabei helfen, in älteren Browsern eine vertikale Zentrierung zu erreichen.
5. Kann CSS Grid verwendet werden, um Text vertikal zu zentrieren?
6. Ja, mit CSS Grid kann Text vertikal zentriert werden display: grid; Und place-items: center;.
7. Ist es möglich, mehrzeiligen Text vertikal zu zentrieren?
8. Ja, mit Flexbox oder CSS Grid kann mehrzeiliger Text problemlos vertikal innerhalb eines Containers zentriert werden.
9. Wie zentriert man Text bei bekannter Containerhöhe vertikal?
10. Sie können das einstellen line-height Eigenschaft, um sie an die Höhe des Containers anzupassen und so den Text effektiv zu zentrieren.
11. Was ist, wenn die Containerhöhe dynamisch ist?
12. Verwenden von Flexbox, Grid oder dem transform Die Eigenschaft gewährleistet eine gleichmäßige vertikale Zentrierung auch bei dynamischen Behälterhöhen.
13. Gibt es irgendwelche Nachteile bei der Verwendung? transform: translateY(-50%);?
14. Es ist zwar wirksam, erfordert jedoch, dass die Eltern dies tun position: relative; und kann im Vergleich zu Flexbox oder Grid etwas komplexer zu implementieren sein.
15. Wie zentriert man Text in einem responsiven Design vertikal?
16. Die Verwendung von Flexbox oder CSS Grid wird für responsive Designs dringend empfohlen, da sie sich gut an unterschiedliche Bildschirmgrößen und -ausrichtungen anpassen.

Abschließende Gedanken zur vertikalen Zentrierung

Die vertikale Zentrierung von Text innerhalb eines Div kann durch mehrere effektive Methoden erreicht werden. Moderne Techniken wie Flexbox und Grid bieten die größte Flexibilität und einfache Implementierung. Ältere Methoden wie Tabellendarstellung und Zeilenhöhe können in bestimmten Fällen immer noch nützlich sein. Durch das Verständnis und die Anwendung dieser unterschiedlichen Ansätze können Entwickler sicherstellen, dass ihre Inhalte optisch ansprechend und auf verschiedenen Geräten und Browsern richtig ausgerichtet sind.