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;
}
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;
}
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;
}
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;
}
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;
}
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.