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:

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:

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.

Welche ist Deine favorisierte Methode zum vertikalen Zentrieren von Elementen?

Quelle: Kulturbanause

Schreibe einen Kommentar

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

Ein Kommentar zu “Elemente vertikal zentrieren mit Hilfe von reinem CSS

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

Diese Website verwendet Cookies. Wenn Sie die Website weiter nutzen, gehen wir von Ihrem Einverständnis aus.