() translation by (you can also view the original English article)
Vor Kurzem veröffentlichte Chris Coyier auf seiner Seite CSS Tricks eine Entscheidungshilfe und zeigt dort zahlreiche Möglichkeiten, um Elemente mit Hilfe von CSS horizontal oder vertikal zu zentrieren. Einzeln für sich hat jede dieser Lösungen kleine Schwächen. Geschickt kombiniert werden sie jedoch zu einem mächtigen Hilfsmittel zum Zentrieren von HTML-Elementen, das in allen modernen Browsern, sogar im IE ab Version 8 aufwärts, konsistent und zuverlässig seinen Dienst verrichtet.
Und so funktioniert es.
Der äußere Block
Wenn Du Deine Webseiten responsiv erstellst, legst Du die Ausmaße von Elementen wahrscheinlich mit Prozentangaben fest. Fangen wir mit einem herkömmlichen.container Element an:
1 |
<div class="container"> |
2 |
... |
3 |
</div>
|
1 |
.container { |
2 |
width: 70%; |
3 |
height: 70%; |
4 |
margin: 40px auto; |
5 |
background: red; |
6 |
}
|
Um sicherzustellen, dass sich die Ausmaße des Container-Elements korrekt an dessen Umgebung anpassen, verwenden wir den folgenden CSS-Code: html, body { width: 100%; height: 100%; }.
Der Trick mit der Tabelle
Mit dem gebräuchlichen Tabellenmuster zentrieren wir im nächsten Schritt die vertikale Ausrichtung innerhalb dieses .container Elements. Dazu bedienen wir uns normaler Blockelemente. Dem Äußeren weisen wir das Verhalten einer Tabelle zu, dem Innneren das Verhalten von Tabellenzellen. Damit erzielen wir eine vertikale Zentrierung:
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
... |
5 |
</div>
|
6 |
</div>
|
7 |
</div>
|
1 |
.outer { |
2 |
display: table; |
3 |
width: 100%; |
4 |
height: 100%; |
5 |
}
|
6 |
.inner { |
7 |
display: table-cell; |
8 |
vertical-align: middle; |
9 |
text-align: center; |
10 |
}
|
Abschließend fügen wir noch ein horizontal zentriertes Element hinzu:
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
<div class="centered"> |
5 |
... |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
1 |
.centered { |
2 |
position: relative; |
3 |
display: inline-block; |
4 |
|
5 |
width: 50%; |
6 |
padding: 1em; |
7 |
background: orange; |
8 |
color: white; |
9 |
}
|
Im innersten Element können wir nun nach Herzenslust beliebige HTML-Elemente platzieren, sogar Textblöcke mit dynamischer Höhe oder absolut positionierte Elemente.
Modifikationsmöglichkeiten
Um die horizontale Ausrichtung des Elements zu beeinflussen, veränderst Du einfach die .inner's text-align Eigenschaft. Eine andere vertikale Zentrierung erzieltst Du durch Änderung der .inner's vertical-align Eigenschaft.
Zusammenfassung
Auf den ersten Blick wirkt es, als wäre der Code unseres Beispiels recht umfangreich. Tatsächlich benötigen wir jedoch lediglich drei div Elemente: .outer, .inner, und.centered. Und die Auszeichnung dieser drei Elemente verändert sich nicht, so dass Du das Konstrukt in unveränderter Form für jedes Deiner Projekte verwenden kannst und Dir nie mehr Gedanken über das Zentrieren machen musst.
Unser Vorgehen benötigt demnach lediglich ein Element mehr als die meisten anderen Zentriertechniken. Und es ist hieb- und stichfest. Meine Hoffnung ist, dass sich dieser Ansatz als Standard-Vorgehensweise für das Zentrieren mittels CSS durchsetzt und wir uns letztlich über das Zentrieren von Elementen mit Hilfe von CSS keine weiteren Gedanken mehr machen müssen.
