Zentrierung in CSS

Adam Argyle hat einen Beitrag auf web.dev veröffentlicht, der sich damit beschäftigt. Er geht von der Annahme aus, dass Sie sowohl vertikale als auch horizontale Zentrierung durchführen müssen. Gerade die vertikale Zentrierung war traditionell für viele ein wenig kniffliger, besonders wenn die Höhe des Inhalts unbekannt ist.

Wir haben einen vollständigen Leitfaden zur Zentrierung, der eine breite Palette von Situationen wie einen Entscheidungsbaum abdeckt.

Adam beschreibt fünf(!) Methoden, um damit umzugehen, sogar die Zentrierung von Elementen mit unbekannten vertikalen und horizontalen Dimensionen, sowie eine Handvoll anderer Einschränkungen wie Sprachrichtung und mehrere Elemente. Ich schätze, all die albernen Witze über die Schwierigkeit, Dinge in CSS zu zentrieren, müssen aktualisiert werden. Vielleicht sollten sie sich darüber lustig machen, wie viele großartige Möglichkeiten es gibt, Dinge in CSS zu zentrieren.

Adam listet die Vor- und Nachteile aller Techniken hervorragend auf und demonstriert sie klar. Es gibt auch ein Video. Er wählt „den sanften Flex“ als den besten Ansatz.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Sie finden es immer in meinen Stylesheets, da es sowohl für Makro- als auch für Mikrolayouts nützlich ist. Es ist eine durch und durch zuverlässige Lösung mit Ergebnissen, die meinen Erwartungen entsprechen. Außerdem neige ich dazu, zu dieser Lösung zu greifen, da ich süchtig nach intrinsischer Größenbestimmung bin. Zugegeben, es ist viel zu tippen, aber die Vorteile, die es bietet, überwiegen den zusätzlichen Code.

Denken Sie daran, dass es beim „Zentrieren in CSS“ nicht immer um diese extremen Situationen geht. Schauen wir uns zum Spaß noch eine andere Situation an. Sagen wir, Sie müssen einige inline-*¹-Elemente horizontal zentrieren ... text-align: center; erledigt das mit einer einzigen Zeile.

Aber was ist, wenn Sie das übergeordnete Element dieser Elemente zentrieren müssen? Sie könnten denken, dass Sie eine klassische margin: 0 auto;-Methode verwenden könnten, und das können Sie auch, aber wahrscheinlich ist das übergeordnete Element vom Typ „block-level“ und damit entweder vollbreit oder hat eine feste Breite. Nehmen wir stattdessen an, Sie möchten, dass es so breit ist wie der Inhalt, den es enthält. Sie könnten das übergeordnete Element zu inline-* machen, aber dann benötigen Sie ein weiteres übergeordnetes Element, auf dem Sie text-align setzen, um es zu zentrieren.

Stefan Judis sprach kürzlich darüber. Der Trick besteht darin, das Element als block-level zu belassen, aber width: fit-content; zu verwenden.

Der alte sanfte Flex hätte hier wahrscheinlich auch zum Einsatz kommen können, aber wir bräuchten wieder ein zusätzliches übergeordnetes Element. Immer etwas zum Nachdenken.

Direkter Link →