12.082013

CSS - Tipps & Tricks: Vertikal zentrieren

Hi Frontend-Freunde. Heute zeige ich euch ein paar Möglichkeiten wie
ihr Elemente vertikal zentrieren könnt. Mit CSS können wir heute schon nahezu jedes
Problem abbilden und lösen. Verläufe, Schatten, selbst Animationen und ganze Browser-Games
wurden und werden in CSS gelöst. Doch etwas so banales wie eine Vertikale Zentrierung,
hat schon den einen oder anderen Frontend Developer grübeln lassen.

vertical-align

Geht es um vertikale Zentrierung ist vertical-align nicht weit. Bei dem passenden, wunderbar
sprechenden Namen denkt man spontan - prima, das sollte mein Problem lösen. Gerade wenn man noch an das gute alte valign aus den Tabellenlayouts kennt. Doch so einfach ist es nicht. vertical-align greift nur, wenn es sich um inline Elemente handelt. Doch was ist mit den Block-Elementen? Wie zentriere ich hier vertikal? Das wollen wir an dieser Stelle aufklären.

line-height

Fangen wir klein an: Eine einfache Methode eine Zeile Text vertikal zu zentrieren ist: line-height. Einfach dem Child-Element die gewünschte line-height verpassen und schon zentriert sich der Text-Snippet vertikal:

HTML
<div class="box">
 <div>Vertikal Zentriert</div>
</div>
CSS
.box > div {
 background: yellow;
 line-height: 200px;
}

vertikal-zentruiert-line-he

Ein Bild mit line-height zentrieren

Handelt es sich bei der obigen Methode um ein Bild, muss das CSS etwas erweitert werden. In diesem Fall bekommt das parent-Element die line-height und das Bild wird mittels der eingangs erwähnten Eigenschaft vertical-align zentriert. Passend für ein inline-Element.

HTML
<div class="box">
 <img src="http://placehold.it/40x40">
</div>
CSS
.box {
 background: yellow;
 line-height: 200px;
}
.box > img {
 vertical-align: middle;
}

v-z-line-height-bild

CSS Tabelle

Eine gern genommene Variante der vertikalen Zentrierung ist die CSS-Tabelle. Gern, weil sie einfach anzuwenden und leicht zu verstehen ist. Schließlich finden wir hier auch das Tabellenmuster wieder. Einfach ein parent-Element als Tabelle und das child-Element als Tabellenzelle deklarieren, sowie der Zelle noch das vertical-align mitgeben - fertig

HTML
<div class="box">
 <div>Vertikal Zentriert</div>
</div>
CSS
.box {
 display: table;
 width: 200px;
 height: 300px;
}
.box > div {
 display: table-cell;
 vertical-align: middle;
 background: green;
}

v-z-line-css-tabelle

Dennoch hat diese Methode einen faden Beigeschmack. Es erscheint dem pflichtbewussten Entwickler irgendwie falsch hier eine Tabelle auszuzeichnen wo keine Tabelle sein muss. Doch irgendwo muss man sich ja selber helfen, wenn der Standard keine Lösung bietet.

Absolute Positionierung und negatives Margin

Der Klassiker: Ein Element einfach zentrieren, indem es absolut positioniert wird. Das parent-Element brauch dabei natürlich relative Positionierung um als Anker/Orientierungspunkt zu fungieren. Dem child-Element dann noch die Werte für die top/left Ausrichtung mitgeben (jeweils 50%) und mit negativem Margin zentrieren. Der negative Margin entspricht der Hälfte der Angaben für width(margin-left) und height(margin-top).

HTML
<div class="box">
 <div>Vertikal Zentriert</div>
</div>
CSS
.box {
 position: relative;
 background: yellow;
 width: 200px;
 height: 200px;
}
.box > div {
 position: absolute;
 background: green;
 width: 100px;
 height: 100px;
 top: 50%;
 left: 50%;
 margin: -50px 0 0 -50px;
}

v-z-line-pos-neg-margin

Absolute Positionierung und Strecken an die Ränder

Die Methode gleicht der vorherigen. Es wird aber statt negativem Margin das child-Element in die jeweiligen Ecken des parent-Elements gestreckt. Einfach für alle Werte der Positionierung 0 vergeben, damit dieses Ziel schon mal erreicht ist. Dann noch mittels margin das Element zentrieren. Durch den Wert auto zentriert der Browser das Element, man höre und staune - automatisch. Fühlt sich jedenfalls etwas sauberer an, als die Variante mit dem negativem margin.

HTML
<div class="box">
 <div>Vertikal Zentriert</div>
</div>
CSS
.box > div {
 position: absolute;
 background: green;
 width: 100px;
 height: 100px;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}

Padding oben und unten gleich

Wieder eine etwas einfachere Methode um Elemente vertikal zu zentrieren. Das Padding des parent-Elements oben und unten auf gleiche Werte setzen und schon ist das darin enthaltene child-Element vertikal zentriert - bestechend logisch.

HTML
<div class="box">
 <div>Vertikal Zentriert</div>
</div>
CSS
.box {
 background: yellow;
 padding: 40px 0;
}
.box > div {
 background: green;
}

v-z-padding-equals

Kommen feste Höhen ins Spiel muss das Padding angepasst werden. Dann gilt: padding-top des parent-Elements + padding-bottom des parent-Elements + Höhe des chils-Elements = Höhe des parent-Elements
Also z. B.:

CSS
.box {
 background: yellow;
 padding: 75px 0;
 height: 200px;
}
.box > div {
 background: green;
 height: 50px;
 padding: 75px 0;
}

Welche Methode ihr nun favorisiert, liegt an den Anforderungen eures Projekts (fixe Boxen, flexibles Layout) und mit welcher Lösung ihr euch am ehesten identifizieren könnt. Happy Coding.