13 Wege zur vertikalen Zentrierung

In den guten alten Zeiten waren die Grenzen von CSS so, dass selbst „einfache“ Dinge wie die vertikale Zentrierung eine Herausforderung darstellten, wobei einige von uns sogar auf JavaScript-Lösungen angewiesen waren. Es war zerbrechlich, es war sehr eingeschränkt, und es gab immer diese eine Ausnahme, die es scheitern ließ.

Ob wir versuchten, ein Icon oder ein Bild neben dem Text auszurichten, eines dieser beliebten „Helden“-Banner oder ein modales Overlay zu erstellen, das Zentrieren von Dingen in der vertikalen Achse war immer ein Kampf.

Aber CSS hat seitdem einen langen Weg zurückgelegt und viele Methoden bereitgestellt, die das vertikale Zentrieren jedes Mal einfacher machten. Hier ist eine Zusammenfassung einiger von ihnen, zusammen mit ihren Anwendungsfällen und Einschränkungen.

Absolute Positionierung und margin auto

Ein Element ohne intrinsische Größe kann „zentriert“ werden, indem einfach gleiche Werte von oben und unten verwendet werden. Wenn das Element intrinsische Abmessungen hat, könnten wir 0 für oben und unten verwenden und dann margin auto anwenden. Dadurch wird das Element automatisch zentriert:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

Siehe den Stift
Centering 1: absolute positioning by Facundo Corradini (@facundocorradini)
auf CodePen.

Die Einschränkung ist natürlich, dass die Höhe des Elements explizit deklariert werden muss, sonst nimmt es den gesamten Container ein.

Der Klassiker top 50% translate -50%

Dies ist einer der ersten und immer noch ein Go-to für viele Entwickler. Ein einfacher Trick, der auf der absoluten Positionierung des inneren Elements bei 50 % von der Oberkante des übergeordneten Elements beruht und es dann um 50 % seiner Höhe nach oben übersetzt:

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

Siehe den Stift
Centering 2: top 50 translateY -50 von Facundo Corradini (@facundocorradini)
auf CodePen.

Ein recht solider Ansatz, mit der einzigen großen Einschränkung, dass die Verwendung von translate anderen Transformationen in die Quere kommen kann, z. B. bei der Anwendung von Übergängen/Animationen.

Tabellen. Ja, ich habe gerade Tabellen gesagt.

Ein wirklich einfacher Ansatz und einer der ersten (früher waren alles Tabellen), ist die Verwendung des Verhaltens von Tabellenzellen und vertical-align, um ein Element auf dem Container zu zentrieren.

Das kann mit tatsächlichen Tabellen geschehen (schade, schade, schade), oder mit semantischem HTML, indem man die Darstellung des Elements auf table-cell umstellt:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

Siehe den Stift
Centering 3: tables von Facundo Corradini (@facundocorradini)
auf CodePen.

Dies funktioniert auch, wenn beide Elemente eine unbekannte Höhe haben. Die größte Einschränkung ist natürlich, wenn Sie ein nicht-zentriertes Geschwister-Element benötigen, und es könnte mit den Hintergrund-Grenzen knifflig werden.

Außerdem sollten Sie bedenken, dass dies bei Screenreadern völlig versagt (selbst wenn Ihr Markup auf divs basiert, führt die Einstellung der CSS-Anzeige auf table und table-cell dazu, dass Screenreader es als tatsächliche Tabelle interpretieren). Weit entfernt vom Besten, wenn es um Barrierefreiheit geht.

Die Ghost-Element-Methode

Ein weiterer Oldie, der sich aus welchen Gründen auch immer nicht durchgesetzt hat, ist die Verwendung von inline-block mit einem Ghost-Element (Pseudo-Element), das 100 % Höhe des Parent-Elements hat, und das Setzen der Eigenschaft vertical-align auf middle:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

Siehe die Pen
Centering 4: ghost element method von Facundo Corradini (@facundocorradini)
auf CodePen.

Es funktioniert eigentlich ganz gut, wobei das auffälligste „Manko“ darin besteht, dass es die horizontale Mitte nur ein kleines bisschen nach rechts verschiebt, wegen des immer knackigen Verhaltens von Whitespace zwischen Inline-Block-Elementen.

Das kann man so behandeln, wie man es mit dem Inline-Block-Problem in jedem anderen Kontext tun würde, der einfachste Ansatz ist die margin-left -1ch, die ich oben verwendet habe (obwohl das nicht 100% genau ist, außer bei Monospace-Schriften, da ch die Breite des „0“-Zeichens bedeutet), oder die Schriftgröße im Container auf 0 zu setzen und sie dann im Element auf px oder rem zurückzusetzen. Nicht optimal, um es vorsichtig auszudrücken.

Margin auto on a flex-item

Endlich auf modernem CSS-Territorium angekommen, hat flexbox ein ziemlich geniales Verhalten für automatische Ränder eingeführt. Jetzt wird das Element nicht nur horizontal zentriert, wie es in Block-Layouts der Fall war, sondern auch in der vertikalen Achse:

.container{ display:flex;}.element{ margin:auto;}

Siehe den Stift
Centering 5: margin:auto on a flex-item von Facundo Corradini (@facundocorradini)
auf CodePen.

Diese Taktik ist wegen ihrer Einfachheit eine meiner Favoriten, die einzige große Einschränkung ist, dass sie nur mit einem einzigen Element funktioniert.

Pseudo-Elemente auf einem Flex-Container

Nicht der praktischste Ansatz der Welt, aber wir können auch flexible, leere Pseudo-Elemente verwenden, um das Element in die Mitte zu schieben:

.container{ display:flex;}.element{ margin:auto;}

Siehe den Beitrag
Centering 6: pseudos on a flexbox von Facundo Corradini (@facundocorradini)
auf CodePen.

Dies kann nützlich sein, wenn wir einen flexiblen Abstand auf einem spaltenorientierten Flexcontainer mit mehreren Elementen beibehalten wollen.

7 & 8. Ausrichten am Flex-Container oder am Flex-Item

Flexbox hat auch wirklich tolle Ausrichtungseigenschaften eingeführt (die jetzt in ein eigenes Box-Ausrichtungsmodul geforkt sind). Damit können wir steuern, wie Elemente platziert werden und wie der leere Raum verteilt wird, und zwar auf eine Art und Weise, die entweder magische Zahlen in CSS für eine bestimmte Anzahl von Elementen (oder ein ziemlich cleveres JS für dynamische Mengen) erfordert hätte.

Abhängig von der Flex-Richtung können wir justify-content oder align-items verwenden, um die Ausrichtung nach Bedarf anzupassen.

Auf dem Container:

.container{ display: flex; justify-content: center; align-items: center;}

Siehe den Stift
Centering 7: align on flex-container von Facundo Corradini (@facundocorradini)
auf CodePen.

Bei einem bestimmten Flex-Element:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

Siehe den Stift
Centering 8: align on flex-item by Facundo Corradini (@facundocorradini)
on CodePen.

Das hat nicht viele Nachteile, außer wenn Sie ältere Browser unterstützen müssen. IE 11 sollte funktionieren, aber seine Implementierung von Flexbox ist ziemlich fehlerhaft, daher sollte man ihn immer mit besonderer Vorsicht behandeln. Der IE 10 erfordert zusätzliche Arbeit, da er auf einem älteren, frühen Entwurf der Spezifikation basiert, der eine andere Syntax hat und das Herstellerpräfix -ms benötigt.

9 & 10. Ausrichten am Grid-Container oder am Grid-Element

CSS Grid enthält so ziemlich die gleichen Ausrichtungsoptionen wie Flexbox, also können wir es am Grid-Container verwenden:

.container{ display: grid; align-items: center; justify-content: center;}

Siehe den Stift
Centering 9: align on grid-container von Facundo Corradini (@facundocorradini)
auf CodePen.

Oder nur an einem bestimmten Grid-Element:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

Die einzige Einschränkung für diese Technik ist die fehlende Unterstützung für ältere Browser.

Sehen Sie den Stift
Centering 10: align on grid-item von Facundo Corradini (@facundocorradini)
auf CodePen.

Pseudo-Elemente in einem Grid

Ähnlich wie bei der Flexbox-Alternative könnten wir ein dreireihiges Grid mit Pseudo-Elementen verwenden:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

Erinnern Sie sich, dass 1fr eigentlich minmax(auto, 1fr) bedeutet, so dass die leeren Zeilen nicht unbedingt ein Drittel der Containerhöhe einnehmen. Sie werden bei Bedarf bis zu ihrem Minimalwert von auto kollabieren, und ohne Inhalt bedeutet das 0.

Sehen Sie sich den Pen
Centering 11 : grid + pseudos von Facundo Corradini (@facundocorradini)
auf CodePen an.

Dies mag wie ein alberner Ansatz aussehen, aber er erlaubt es uns, einen meiner liebsten CSS-Grid-Tricks einfach umzusetzen: die Kombination von fr-Zeilen mit minmax-Zeilen, was dazu führt, dass zuerst die leeren fr-Zeilen kollabieren, dann die mixmax-Zeilen. Jenn Simmons hat großartige Beispiele dafür.

So, dass die Pseudos die vollständig einklappbaren Zeilen nehmen, erlaubt es dem Auto-Placement-Algorithmus, seine Magie auf unsere tatsächlichen Elemente anzuwenden. Es sei denn, wir müssen den IE unterstützen, dem die automatische Platzierung fehlt. Das führt uns zur nächsten Methode…

Explizite Platzierung von Rasterzeilen

CSS-Raster erlaubt es, Elemente explizit in einer bestimmten Zeile zu platzieren, also reicht die gleiche Rasterdeklaration wie oben und das Element wird in der zweiten Zeile platziert:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

Dies kann bis zum IE10 funktionieren. Ob Sie es glauben oder nicht, der IE war einer der ersten und stärksten Befürworter des CSS-Grid und lieferte es bereits 2011 mit dem IE10 aus. Es basiert auf einem sehr frühen Entwurf, der eine komplett andere Syntax hat, aber wir können es zum Laufen bringen:

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

Siehe den Stift
Centering 12 : explicit placement on a grid von Facundo Corradini (@facundocorradini)
auf CodePen.

Margin auto auf ein Grid-Element

Ähnlich wie bei Flexbox wird ein Grid-Element durch die Anwendung von margin-auto auf beiden Achsen zentriert.

.container{ display: grid;}.element{ margin: auto;}

Sehen Sie den Stift
Centering 12 : explicit placement on a grid von Facundo Corradini (@facundocorradini)
auf CodePen.

Einige (wahrscheinliche) zukünftige Implementierungen

Nach der Spezifikation des CSS Box Alignment Module Level 3 sollte align-content auf der Blockachse von Block-Containern und Multicol-Containern funktionieren, so dass wir (wenn die Browser es implementieren) in der Lage sein sollten, den Inhalt dieser Container genauso zu zentrieren, wie wir es in Flex- oder Grid-Containern tun.

Fazit