13 Wege zur vertikalen Zentrierung

In den guten alten Zeiten waren die Grenzen von CSS so groß, 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 zum Scheitern brachte.

Egal, ob wir versuchten, ein Symbol oder ein Bild neben dem Text auszurichten, eines dieser beliebten „Helden“ -Banner oder ein modales Overlay zu erstellen, die Zentrierung der Dinge in der vertikalen Achse war immer ein Kampf.

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

Absolute Positionierung und Rand auto

Ein Element ohne intrinsische Größe kann „zentriert“ werden, indem einfach gleiche Werte von oben und unten verwendet werden. Wenn das Element intrinsische Dimensionen hat, können wir 0 für oben und unten verwenden und dann den Rand automatisch 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 Stift
Zentrieren 1: absolute Positionierung von Facundo Corradini (@facundocorradini)
auf CodePen.

Die Einschränkung besteht natürlich darin, dass die Elementhöhe explizit deklariert werden muss, da sie sonst den gesamten Container belegt.

Die klassischen Top 50% übersetzen -50%

Dies ist einer der ersten, und immer noch ein Go-to, für viele Entwickler. Ein einfacher Trick, der sich auf die absolute Positionierung des inneren Elements bei 50% von der Spitze ihres Elternteils stützt und es dann um 50% seiner Höhe übersetzt:

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

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

Ein ziemlich solider Ansatz, wobei die einzige große Einschränkung die Verwendung von translate ist, die anderen Transformationen im Wege stehen könnte, z. B. beim Anwenden von Übergängen / Animationen.

Tabellen. Ja, ich habe gerade Tische gesagt.

Ein wirklich einfacher Ansatz und einer der ersten (damals war alles Tabellen), verwendet das Verhalten von Tabellenzellen und vertical-align , um ein Element auf dem Container zu zentrieren.

Dies kann mit tatsächlichen Tabellen (Schande, Schande, Schande) oder mit semantischem HTML erfolgen, indem die Anzeige des Elements auf table-cell umgeschaltet wird:

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

Siehe den Stift
Zentrierung 3: Tabellen von Facundo Corradini (@facundocorradini)
auf CodePen.

Dies funktioniert auch, wenn beide Elemente eine unbekannte Höhe haben. Die Hauptbeschränkung besteht natürlich darin, dass Sie ein nicht zentriertes Geschwister benötigen, und es kann schwierig werden, die Hintergrundbeschränkungen einzuhalten.

Denken Sie auch daran, dass dies bei Bildschirmleseprogrammen völlig fehlschlägt (selbst wenn Ihr Markup auf divs basiert und die CSS-Anzeige auf table und table-cell gesetzt wird, interpretieren Bildschirmleseprogramme sie als tatsächliche Tabelle). Weit entfernt von den besten, wenn es um Zugänglichkeit geht.

Die Ghost-Element-Methode

Ein weiterer Oldie, der aus irgendeinem Grund nicht aufgeholt hat, verwendet Inline-block mit einem Ghost (Pseudo) -Element, das 100% Höhe des übergeordneten Elements hat, und setzt dann die vertical-align-Eigenschaft auf middle:

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

Siehe den Stift
Zentrieren 4: ghost element Methode von Facundo Corradini (@facundocorradini)
auf CodePen.

Es funktioniert eigentlich ganz gut, mit dem auffälligsten „Gotcha“ ist, dass es die horizontale Mitte nur ein kleines bisschen nach rechts bewegt, wegen des immer kriechenden Verhaltens von Leerzeichen zwischen Inline-Block-Elementen.

Dies kann wie mit dem Inline-Block-Problem in jedem anderen Kontext behandelt werden, wobei der einfachste Ansatz der margin-left -1ch ist, den ich oben verwendet habe (obwohl dies nicht 100% genau ist, außer bei Monospace-Schriftarten, da ch Einheit die Breite des „0“ -Zeichens bedeutet), oder die Schriftgröße auf dem Container auf 0 setzen und dann auf px oder rem auf dem Element zurücksetzen. Nicht optimal, um es zumindest auszudrücken.

Margin Auto auf einem Flex-Item

Endlich in das moderne CSS-Territorium eingetreten, hat Flexbox ein ziemlich tolles Verhalten für automatische Ränder eingeführt. Jetzt zentriert es das Element nicht nur horizontal wie in Blocklayouts, sondern zentriert es auch in der vertikalen Achse:

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

Siehe den Stift
Zentrierung 5: margin:auto auf einem Flex-Item von Facundo Corradini (@facundocorradini)
auf CodePen.

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

Pseudoelemente auf einem Flex-Container

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

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

Siehe den Stift
Zentrierung 6: Pseudos auf einer Flexbox von Facundo Corradini (@ facundocorradini)
auf CodePen.

Dies kann nützlich sein, wenn wir einen flexiblen Abstand auf einem spaltenorientierten Flex-Container mit mehreren Elementen beibehalten möchten.

7 & 8. Ausrichten auf dem Flex-Container oder dem Flex-item

Flexbox hat auch wirklich großartige Ausrichtungseigenschaften eingeführt (die jetzt in ein eigenes Box-Ausrichtungsmodul gegabelt sind). Auf diese Weise können wir steuern, wie Elemente platziert werden und wie leerer Speicherplatz auf eine Weise verteilt wird, 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 sie nach Bedarf anzupassen.

Auf dem Container:

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

Siehe den Stift
Zentrieren 7: Ausrichten auf Flex-Container von Facundo Corradini (@facundocorradini)
auf CodePen.

Auf einem bestimmten Flex-item:

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

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

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 es immer mit besonderer Sorgfalt behandelt werden. IE 10 erfordert zusätzliche Arbeit, da es auf einem älteren, frühen Entwurf der Spezifikation basiert, der eine andere Syntax hat und das Herstellerpräfix -ms erfordert.

9 & 10. Auf dem Grid-Container oder dem grid-item ausrichten

CSS Grid enthält so ziemlich die gleichen Ausrichtungsoptionen wie flexbox, so dass wir es auf dem Grid-Container verwenden können:

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

Siehe den Stift
Zentrierung 9: Ausrichten am Grid-Container von Facundo Corradini (@facundocorradini)
auf CodePen.

Oder nur auf einem bestimmten Grid-Item:

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

Der Mangel an Legacy-Browser-Unterstützung ist die einzige Einschränkung für diese Technik.

Siehe den Stift
Zentrierung 10: Am Raster ausrichten-Artikel von Facundo Corradini (@facundocorradini)
auf CodePen.

Pseudoelemente in einem Raster

Ähnlich wie bei der Flexbox-Alternative könnten wir ein dreizeiliges Raster mit Pseudoelementen verwenden:

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

Denken Sie daran, dass 1fr tatsächlich minmax(auto, 1fr) bedeutet, sodass die leeren Zeilen nicht unbedingt ein Drittel der Containerhöhe einnehmen. Sie werden nach Bedarf bis zu ihrem minimalen Wert von auto zusammenbrechen, und ohne Inhalt bedeutet 0.

Siehe den Stift
Zentrierung 11 : grid + pseudos von Facundo Corradini (@facundocorradini)
auf CodePen.

Das mag wie ein dummer Ansatz aussehen, aber es erlaubt uns, einen meiner Lieblings-CSS-Grid-Tricks leicht zu machen: fr-Zeilen mit Minmax-Zeilen zu kombinieren, wodurch die leeren fr-Zeilen zuerst kollabieren und dann die Mixmax-Zeilen. Jenn Simmons hat großartige Beispiele dafür.

Wenn die Pseudos also die vollständig zusammenklappbaren Zeilen verwenden, kann der Algorithmus für die automatische Platzierung seine Magie auf unsere tatsächlichen Elemente ausüben. Außer wenn wir IE unterstützen müssen, dem die automatische Platzierung fehlt. Was uns zur nächsten Methode führt …

Explizite Platzierung von Rasterzeilen

CSS grid erlaubt es, Elemente explizit in einer bestimmten Zeile zu platzieren, sodass die gleiche Rasterdeklaration wie oben und das in der zweiten Zeile platzierte Element ausreichen:

.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 zu IE10 funktionieren. Ob Sie es glauben oder nicht, IE war einer der ersten und stärkeren Unterstützer von CSS Grid und hat es 2011 mit IE10 ausgeliefert. Es basiert auf einem sehr frühen Entwurf, der eine völlig 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
Zentrierung 12: explizite Platzierung in einem Raster von Facundo Corradini (@facundocorradini)
auf CodePen.

Randautomatik auf einem Rasterelement

Ähnlich wie bei Flexbox zentriert die Anwendung von Randautomatik auf ein Rasterelement es auf beiden Achsen.

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

Siehe den Stift
Zentrierung 12 : explizite Platzierung in einem Raster von Facundo Corradini (@facundocorradini)
auf CodePen.

Einige (wahrscheinliche) zukünftige Implementierungen

Gemäß der Spezifikation des CSS Box Alignment Module Level 3 sollte align-content auf der Blockachse von Blockcontainern und Multicol-Containern funktionieren, also (wenn Browser es implementieren) Wir sollten in der Lage sein, den Inhalt dieser Container genau wie in Flex- oder Grid-Containern zu zentrieren.

Fazit