Elemente vertikal zentrieren mit Hilfe von reinem CSS

Das horizontale Zentrieren von Elementen sollte für den Webentwickler kein Problem sein, schwieriger wird es allerdings in der Vertikalen. In diesem Artikel möchte ich Dir zwei reine CSS-Lösungen vorstellen.

HTML-Code

Gehen wir von folgender Ausgangslage aus:

<div id="parent">
  <div class="child">
    <h2>Dieser Text soll vertikal zentriert werden</h2>
  </div>
</div>

Display: Flex

Flexbox wird von allen modernen Browsern unterstützt, eine Übersicht der Supports kannst Du Dir hier verschaffen. Bei dieser Methode bekommt lediglich das direkte Elternelement bestimmte Anweisungen:

#parent {
  display: flex; /* Aktiviert das Flex-Modell */
  align-items: center; /* Zentriert den Child vertikal, relativ zum Parent */
  justify-content: center; /* Zentriert den Child horizontal, relativ zum Parent */
}

Der Text sollte in diesem Beispiel nun sowohl vertikal, als auch horizontal zentriert sein.

Display: table

Das Flexbox-Modell ist noch recht neu, weswegen ältere Browser es nicht unterstützen. Alternativ kannst Du Elemente auch mit display: table und display: table-cell vertikal zentrieren. Der Parent bekommt in dem Fall display: table, das Child-Element display: table-cell. Im Anschluss verhalten sich die Elemente wie eine Tabelle und können mit vertical-align: middle zentriert werden. Wichtig: Falls der Parent vorher ein Block-Element war, wird es nötig sein, ihm die Breitevon 100% manuell zuzuweisen.

#parent {
  display: table;
  width: 100%;
  height: 10em;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

Welche ist Deine favorisierte Methode zum vertikalen Zentrieren von Elementen?

Quelle: Kulturbanause