Der heilige Gral der CSS-Zentrierung

Chris Coyier hat kürzlich einen Entscheidungsbaum auf seiner Site, CSS Tricks, veröffentlicht, um eine Fülle von Möglichkeiten zu zeigen, wie man Dinge mithilfe von CSS horizontal oder vertikal zentrieren kann. Als Standalone-Lösungen haben sie alle ihre Vorbehalte, aber in Kombination sind sie ein unaufhaltsames Zentrierwerkzeug, das Browserübergreifend in IE8 und darüber arbeitet.

Das ist wie man es macht.

Hinweis: Um alle Grundlagen abzudecken, habe ich die Erklärung in Video und in schriftlicher Form bereitgestellt. 

Schau das Video

Laden Sie ein Video herunter oder abonnieren Sie Tuts + Web Design auf Youtube

Lesen Sie das Tutorial

Wenn Sie eine responsive Website erstellen, werden Sie Ihre Elemente höchstwahrscheinlich mit Prozentsätzen in der Größe anpassen. Nehmen Sie also eine beliebige Größe vor .Container Element:

… 
 

.Behälter Breite: 70%; Höhe: 70%; Marge: 40px auto; Hintergrund: rot;  

Um sicherzugehen, dass sich unser enthaltendes Element entsprechend erstreckt, lassen Sie uns festlegen HTML, Körper Breite: 100%; Höhe: 100%; .

Die Tische drehen

Jetzt drin .Container, Wir werden eine vertikale Zentrierung mit dem üblichen Tischmuster erhalten. Dies nimmt normale Blockebenenelemente ein und bewirkt, dass sie sich wie Tabellenzellen verhalten, was uns vertikal zentriert:

 
 
… 
 
 
 

.äußere Anzeige: Tabelle; Breite: 100%; Höhe: 100%;  .inner display: table-cell; vertikal ausrichten: Mitte; Text ausrichten: Mitte;  

Zum Schluss fügen wir ein horizontal zentriertes Element hinzu:

 
 
 
… 
 
 
 
 

.zentriert position: relativ; Anzeige: Inline-Block; Breite: 50%; Polsterung: 1em; Hintergrund: Orange; Farbe weiß;  

Darin können Sie alles platzieren, was Ihr Herz begehrt, einschließlich Textblöcke mit dynamischer Höhe oder absolut positionierte Elemente.

Demo auf GitHub

Änderungen

Ändern Sie einfach die horizontale Zentrierung des Elements .innere's Textausrichtung Eigentum. Ändern Sie die vertikale Zentrierung .innere's vertikal ausrichten Eigentum.

Abschließend

Dieses Beispiel mag wie viel Markup erscheinen, aber die Arbeitstücke sind nur drei  divs: .äußere, .innere, und.zentriert. Das Styling für diese Objekte ist konsistent, sodass Sie dieses in Ihrem Boilerplate-CSS projektübergreifend verwenden können und sich nie wieder darum kümmern müssen.

Es ist um ein Element größer als die meisten Zentriertechniken und absolut kugelsicher. Ich hoffe, dass dies zum Standardansatz wird, und wir können endlich aufhören, sich Sorgen um die Zentrierung in CSS zu machen.