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.