Das horizontale Zentrieren von Texten oder anderen Inhalten sollte für die meisten kein Problem sein. Anders sieht es bei der vertikalen Zentrierung aus, bei der einige sicherlich schon unzählige Nerven verloren haben. 🙂 In diesem Artikel stelle ich Dir zwei Möglichkeiten vor, die es Dir ermöglichen, Elemente mit recht wenig Code auch vertikal zu zentrieren.
Wichtig: Um Elemente mit diesen Methoden vertikal zentrieren zu können, muss das zu zentrierende Element das einzige direkte Kind-Element eines Eltern-Elements sein. Es darf keine weiteren Geschwister-Elemente enthalten.
Möglichkeit 1. display: table
Diese Möglichkeit verfügt über einen sehr guten Browser-Support und ist nicht mit Tabellen zu verwechseln, mit denen man damals ganze Layouts entwickelt hat. Hier geht es um die „display:table“-Eigenschaft von CSS. Du kannst also aufatmen. 😀
Beispiel für die HTML-Struktur:
<!-- Funktioniert --> <div class="eltern-element"> <div class="kind-element"></div> </div> <!-- Funktioniert --> <div class="eltern-element"> <div class="kind-element"> <p>Der vertikal zentrierte Text</p> </div> </div> <!-- Funktioniert NICHT --> <div class="eltern-element"> <div class="kind-element"></div> <div class="weiteres-kind-element"></div> </div>
Nun folgt der entsprechende CSS-Code. Deinem Eltern-Element gibst Du „display: table“ mit, damit es sich wie eine Tabelle in HTML verhält. Dabei zu beachten ist, dass, falls es sich bei diesem Element um ein Block-Element handelt, die Breite von 100% nochmal manuell hinzugefügt werden muss. (width: 100%;)
Das Kind-Element erhält die Werte display: table-cell und vertical-align: middle. Durch den ersten bewirkst Du, dass sich das Kind-Element wie eine Tabellenzeile in HTML verhält, durch den zweiten Wert wird die entsprechende Zeile vertikal zentriert, relativ zum Eltern-Element.
Beispiel für die CSS-Anweisungen
.eltern-element { display: table; width: 100%; /* Falls es sich um ein Block-Element handelt */ height: 300px; /* Im besten Fall hat das Eltern-Element bereits eine Höhe, diese Anweisung kann dann ignoriert werden */ } .kind-element { display: table-cell; vertical-align: middle; }
Das war´s schon. Nun sollte der Inhalt des Elements mit der Klasse kind-element vertikal zentriert dargestellt werden. Schauen wir uns nun die zweite Möglichkeit an.
Möglichkeit 2. display: flex
Diese Möglichkeit mag ich ganz besonders, da man hier nur dem Eltern-Element Anweisungen mitgeben muss. Der Nachteil liegt im Browser-Support. Ältere Browser unterstützen das Flexbox-Modell leider nicht, daher prüf bitte, bevor Du Dich für diese Möglichkeit entscheidest, die Voraussetzungen Deines Projektes.
Mit der Angabe display: flex wird das Flexbox-Modell innerhalb eines Elements aktiviert. Soll der Inhalt dieses Elements vertikal zentriert werden, verwendest Du zusätzlich align-items: center. Für die horizontale Zentrierung ist justify-content: center vorgesehen. Die HTML-Struktur bleibt:
Beispiel für die HTML-Struktur:
<!-- Funktioniert --> <div class="eltern-element"> <div class="kind-element"></div> </div> <!-- Funktioniert --> <div class="eltern-element"> <div class="kind-element"> <p>Der vertikal zentrierte Text</p> </div> </div> <!-- Funktioniert NICHT --> <div class="eltern-element"> <div class="kind-element"></div> <div class="weiteres-kind-element"></div> </div>
Beispiel für die CSS-Anweisungen
.eltern-element { display: flex; align-items: center; /* Vertikale Zentrierung */ justify-content: center; /* Horizontale Zentrierung */ }
Gut, damit hätten wir die Inhalte vertikal zentriert. Viel Spaß beim Ausprobieren!
Super Beitrag sehr Informativ danke !
Hallo,
Vielen Dank für diesen Durchaus überragenden und Detaillierten Beitrag. Endlich kann auch jemand wie ich der Im Programmieren nicht ganz so stark ist auch was mit der Anleitung anfangen. Super erklärt und auch für Spätzünder ein Hervorragende Beschreibung.
Ps. Die Beispielbilder sind Perfekt.
Beste Grüße
Elias
Hallo,
dein Tutorial ist sehr verständlich. Besonders gefallen mir deine Beispielbilder die zu der Erklärung hinzugefügt wurden.
Hallo,
endlich mal jemand der es mir richtig rüberbringen konnte, hatte immer wieder Probleme bei der vertikalen Zentrierung. Habe es immer unprofessionell mit margin es versucht bis ich gemerkt habe dass es mal wieder nicht klappt und habe es dann mit padding gemacht, wobei es sehr unsauber war. Vielen Dank
Vielen Dank für Deinen Kommentar! 🙂
Müsste
„top:50%; oder bottom:50%;“ nicht auch gehen? Zusätzlich müsste das Element dann noch absolute positioniert werden. Aber deine Lösung ist wahrscheinlich einfacher 😀
Hallo David,
das funktioniert aus dem Grund nicht, weil Elemente immer von oben links ausgerichtet werden, somit hättest Du durch top: 50% nicht wirklich die tatsächliche Mitte, sondern das Element würde sich – je nach Höhe des Elementes – etwas tiefer befinden. 🙂 Dann müsste mit Minus-Margin getrickst werden. So hat man´s eine Zeit lang gemacht. Mit der Flex-Technologie sind die Möglichkeiten glücklicherweise besser geworden. 🙂
display: flex mit align-items: center war die Lösung, danke.
Gerne! 🙂