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

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


  1. Hey,
    cooler Beitrag. Deine Methode zum vertikalen Zentrieren von Elementen ist auch tatsächlich auch meine Methode.
    Liebe Grüße

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.