Elemente mit CSS vertikal zentrieren

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!