Florence Maurice

Webthemen

CSS: 4 Lösungen für eine vertikale Zentrierung bei unbekannter Höhe

Geschrieben am: , aktualisiert:

Ich freue mich immer, wenn es über CSS3 neue Lösungen für alte Probleme gibt. Die vertikale Zentrierung von Elementen unbekannter Höhe ist so eines. Im Beitrag zeige ich 4 Lösungen - drei setzen auf CSS3, eine auf CSS 2.1. Das Ergebnis dieser vier Lösungen ist immer dasselbe: ein Element unbestimmter Höhe wird in der Mitte der Webseite angezeigt. Die Techniken sind unterschiedlich ...

Eine Anmerkung aus heutigen Zeit. Heute, wo wir Flexbox und Gridlayout haben, sind die meisten dieser Techniken nicht mehr notwendig. Sie funktionieren aber. Ich habe den Artikel gelassen, wie er damals war, nur die Hinweise auf alte Browserversionen sowie heute unnötige Präfixe entfernt.

Beginnen wir mit translate() und relativer Positionierung.

Zentrieren mit CSS3-2D-Transformationen (translate()) und relativer Positionierung

Das Element, das zentriert werden soll, benötigt folgende Angaben:

.zentriert { 
position: relative;
top: 50%;
transform: translateY(-50%);
}

Angaben wie top wirken nur bei positionierten Elementen, d.h. bei Elementen mit der Angabe position und einem der drei Werte absolute, fixed oder relative. Mit eine relativen Positionierung und einer Angabe von top: 50% positionieren wir die linke obere Ecke des Elements auf 50% der Höhe des umfassenden Elements. Damit das aber überhaupt klappen kann, benötigt das umfassende Element eine explizite Höhe, ein Wert wie auto funktioniert nicht.

Jetzt ist die linke obere Ecke des Elements zentriert, aber für eine richtige Zentrierung muss die Mitte des Elements zentriert sein. Eine klassische Methode bestand jetzt darin, das Element um die Hälfte seiner Höhe nach oben zu verschieben über margin-top mit einem negativen Wert. Die neue Lösung aus CSS3 funktioniert auch, wenn die Höhe des Elements nicht bekannt ist: Man verwendet die translateY()-Funktion, die eine Verschiebung des Elements auf der Y-Achse (vertikal) bewirkt. Das Spannende dabei: Bei der translate()-Funktionen beziehen sich Prozentangaben nicht auf die Ausmaße des Elternelements, sondern auf das Elements selbst.

Im Beispiel gibt es zwei Mal Prozentangaben, die jedoch unterschiedlich funktionieren: Bei top beziehen sie sich auf das Elternelement, bei translateY() auf das Element selbst.

Wichtig allerdings: Das umfassende Element benötigt eine explizite Höhe, sonst funktioniert top: 50% bei relativer Positionierung nicht.

live austesten bei JSFiddle - vertikal zentriert mit translate() und position: relative

Zentrieren mit CSS3-2D-Transformationen (translate()) in Kombination mit position: absolute

Anstelle der relativen Positionierung können wir auch die absolute Positionierung in Kombination mit translate() für die Zentrierung nehmen:

.zentriert { 
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

Dann können wir uns die explizite Höhe beim Elternelement sparen, sollten aber eine Breite beim Element selbst angeben - denn sonst gilt das Shrink-to-fit-Prinzip, was bedeutet, dass das Element so klein wie nur möglich wird.

live austesten bei JSFiddle - vertikal zentriert mit translate() und position: absolute

Zentrieren mit dem CSS3-Layoutmodul Flexbox

Mit Flexbox geht die vertikale Zentrierung recht einfach vonstatten - die Angaben werden dabei beim Elternelement des Elements benötigt, das man zentrieren will. Dieses muss man mit display: flex zu einer Flexbox-Darstellung machen - und mit align-items: center zentriert man vertikal.

body { 
display: flex;
align-items: center;
}

Das Element selbst sollte auf eine Breite gesetzt werden, sonst gilt das Shrink-to-fit-Prinzip, es würde nur so klein wie nur möglich werden:

.zentriert { width: 100%; }

live austesten bei JSFiddle - vertikal zentriert CSS3-Flexbox

Übrigens kann man bei Flexbox auch über margin zentrieren - mehr dazu in meinem neuen Blogbeitrag: Zentrieren mit Flexbox.

Zentrieren über "klassische" CSS 2.1-Tabellendarstellungen

Die als viertes vorgestellte Variante setzt nicht auf CSS3, sondern auf CSS 2.1. Hierbei machen wir ein umfassendes Element zu einer Tabelle (im Beispiel html), das Element, das sich drinnen befindet, wird zur Tabellenzelle und sorgt für die gewünschte Anordnung (body). Damit ist das in body befindliche Element .zentriert.

html { 
height: 100%;
display: table;
width: 100%;
}
body {
display: table-cell;
vertical-align: middle;
}
.zentriert { /* keine besonderen Angaben */ }

Man braucht allerdings eine Breitenangabe beim Element, das zu einer CSS-Tabellendarstellung gebracht wird: Denn eine Tabelle ist von Haus aus nur so schmal, wie der Inhalt es benötigt - anders etwa als klassische Blockelemente, die die gesamte zur Verfügung stehende Breite nehmen.

live austesten bei JSFiddle - vertikal zentriert CSS-Tabellen