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

vertikal zentriert

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 …

  • CSS3-2D-Transformationen (translate()) in Kombination mit position: relative
  • CSS3-2D-Transformationen (translate()) in Kombination mit position: absolute
  • Zentrieren mit dem CSS3-Layoutmodul Flexbox
  • Zentrieren über „klassische“ CSS 2.1-Tabellendarstellungen

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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-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.

Das Beispiel setzt auf 2D-Transformationen und funktioniert in allen modernen Browsern, im Internet Explorer ab Version 9 – aber man muss diesem Browser natürlich sein Präfix spendieren.

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%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-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: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}

Allerdings braucht es etwas mehr Code, um auch noch Browser ins Boot zu holen, die Vorversionen der Spezifikation unterstützen.

body {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
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 

Bei Flexbox gibt es allerdings ein Aber – und das ist der Internet Explorer. Er unterstützt Flexbox erst ab Version 10, Version 9 bleibt außen vor.

Ü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 – entsprechend ist die Browserunterstützung ausgezeichnet und es funktioniert sogar noch im IE8. 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

12 Kommentare zu “CSS: 4 Lösungen für eine vertikale Zentrierung bei unbekannter Höhe”

  1. lonariks

    Endlich eine Lösung, bei der nicht versucht wird an die Tabellenzeit mit HTML anzuknüpfen. Guter Beitrag 😉

    Antworten
  2. Daniela

    DANKE DANKE DANKE genau sowas habe ich gesucht! Top Beitrag!

    Antworten
  3. Jonas

    Vielen Dank. Das war genau das, was ich gesucht habe.

    Antworten
  4. Zorndyuke

    CSS3 Rulez <3 Können wir uns alle darauf einigen die alten Browser nicht mehr zu unterstützen und alle dazu zwingen wenigstens etwas aktuelle Browser zu benutzen? Um der Sicherheit willen *hust*.. die alten Browser sind nun einmal mit vielen Sicherheitslücken befüllt! *hust*

    Antworten
    • Florence

      yepp 🙂 … rein aus Sicherheitsgründen 😉

      Antworten
  5. Hansi

    Ich möchte die Flexbox-Lösung einsetzen, um unterschiedlich langen Text in einem DIV zu zentrieren. Das klappt auch FAST perfekt. In FF, Chrome und Opera wird der Text (ohne enthaltene Zeilenumbrüche) automatisch innerhalb des DIV umgebrochen und zentriert. ABER in IE10 wird eine einzige lange Zeile dargestellt, welche zwar vertikal zentriert ist, aber horizontal außerhalb des DIV weiterläuft… 🙁

    Antworten
  6. Kate Te

    Das war mal ein richtig guten und konstruktiver Tip. DANKE 🙂

    Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>