So zentrierst du ein `div` in CSS

 (joshwcomeau.com)
5 Punkte von GN⁺ 2024-02-14 | 3 Kommentare | Auf WhatsApp teilen

Methoden zum Zentrieren von Elementen

  • Ein Element innerhalb seines Elternelements zu zentrieren, war lange Zeit ein kniffliges Problem.
  • Mit der Weiterentwicklung von CSS wurden verschiedene Lösungen eingeführt, und heute gibt es viele Optionen.
  • Dieses Tutorial hilft dabei, die Trade-offs zwischen den verschiedenen Ansätzen zu verstehen, und bietet eine Strategie, mit der sich Zentrierung in allen Szenarien bewältigen lässt.

Zentrieren mit automatischen Margins

  • Wenn ein Element horizontal zentriert werden soll, können Margins mit dem Wert auto verwendet werden.
  • Die Breite des Elements muss begrenzt werden; fit-content passt die Größe des Elements an seinen Inhalt an.
  • Mit der Eigenschaft margin-inline lassen sich margin-left und margin-right gleichzeitig auf auto setzen.

Zentrieren mit Flexbox

  • Flexbox bietet viel Kontrolle bei der Verteilung einer Gruppe von Items entlang der Hauptachse.
  • Ein einzelnes Element kann horizontal und vertikal zentriert werden, und die Zentrierung bleibt auch erhalten, wenn Kind-Elemente nicht in den Container passen.
  • Mit der Eigenschaft flex-direction lässt sich die Stapelrichtung mehrerer Kind-Elemente steuern.

Zentrieren im Viewport

  • Manchmal muss ein Element nicht innerhalb eines Eltern-Containers, sondern innerhalb des Viewports zentriert werden.
  • Mit position: fixed und inset: 0px kann das Element im Viewport fixiert werden, und mit margin: auto lässt es sich horizontal und vertikal zentrieren.

Zentrieren von Elementen mit unbekannter Größe

  • Wenn die Größe eines Elements nicht explizit bekannt ist, kann fit-content verwendet werden, um das Element passend zum Inhalt zu verkleinern.

Zentrieren mit CSS Grid

  • Die kürzeste Methode, ein Element mit CSS Grid horizontal und vertikal zu zentrieren, ist die Eigenschaft place-content: center.

Unterschiede zu Flexbox

  • CSS Grid verwendet einen anderen Layout-Algorithmus, und die zusätzliche Komplexität kann in manchen Fällen problematisch sein.
  • Während Flexbox Prozentwerte relativ zum Elternelement berechnet, berechnet CSS Grid sie relativ zur Grid-Zelle.

Einen Stapel von Elementen zentrieren

  • Mit CSS Grid können mehrere Elemente derselben Zelle zugewiesen werden, sodass sie sich von hinten nach vorn stapeln.

Text zentrieren

  • Text wird in CSS gesondert behandelt, und mit der Eigenschaft text-align kann er zentriert werden.

Die Zukunft des Zentrierens

  • Die Eigenschaft align-content wird auch im Flow-Layout implementiert und steuert dort die Ausrichtung von Inhalten in Blockrichtung.

Über Muster hinaus

  • Wer CSS tief versteht, kann Probleme mit Intuition lösen, statt sich auf auswendig gelernte Muster zu verlassen.

Entscheiden, welche Methode verwendet werden sollte

  • Wenn ein einzelnes Element horizontal zentriert werden soll, kann die Strategie mit automatischen Margins im Flow-Layout verwendet werden.
  • Um schwebende UI-Elemente wie Modals oder Banner zu zentrieren, können positioniertes Layout und automatische Margins verwendet werden.
  • Um einen Stapel von Elementen zu zentrieren, kann CSS Grid verwendet werden.
  • Zum Zentrieren von Text kann text-align genutzt werden; dies lässt sich auch mit anderen Methoden kombinieren.
  • In den meisten anderen Fällen kann Flexbox verwendet werden. Es ist die vielseitigste Methode und kann ein oder mehrere Kinder horizontal/vertikal zentrieren.

Meinung von GN⁺

  • Das Wichtigste an diesem Artikel ist, dass er das Verständnis der verschiedenen Methoden zum Zentrieren in CSS fördert.
  • Durch die Weiterentwicklung von CSS sind Zentrierungsaufgaben, die früher komplex waren, heute deutlich einfacher geworden, was Webentwicklern sehr hilft.
  • Moderne CSS-Techniken wie Flexbox und CSS Grid zu verstehen und einzusetzen, ist für Webdesign und Layout inzwischen eine unverzichtbare Fähigkeit.

Verwandte Beiträge

3 Kommentare

 
v08zbv8fvlkjasdflkj 2024-02-15

Wo wir gerade dabei sind: Mir fällt plötzlich auf die Nerven, dass bei GeekNews die Artikel auch nicht zentriert sind seufz haha
 
joyfui 2024-02-14

place-items: center; nutze ich sehr häufig, aber es gibt offenbar noch mehrere weitere Methoden.
 
GN⁺ 2024-02-14
Hacker-News-Kommentare

  • Zusammenfassung des ersten Kommentars:

    • Es gibt verschiedene Meinungen dazu, warum es schwierig ist, Elemente mit CSS zu zentrieren.
    • Wenn die meisten Leute fragen, warum Zentrierung schwierig ist, meinen sie einfach, wie man ein Element exakt in der Mitte eines anderen Elements platziert.
    • In früherem HTML ließ sich mit dem Tag <table> leicht zentrieren, während sich das mit CSS schwierig anfühlt.
    • Es ist enttäuschend, dass CSS als besseres Werkzeug galt, aber nicht einmal grundlegende Zentrierung einfach machte.
    • Aus diesem Grund wurden lange Zeit Tabellenlayouts verwendet.
    • Trotzdem mag man CSS.

  • Zusammenfassung des zweiten Kommentars:

    • Viele Menschen verstehen die Komplexität automatischer Seitenlayouts und Formatierung nicht.
    • Es ist unmöglich, diese Komplexität in ein einfaches „Mach einfach, was ich will“ zu abstrahieren.
    • Als Beispiel für eine Website wird die Seite von Gwern Branwen genannt; wichtig ist, Inhalte so zu begrenzen, dass sie zum gewünschten Stil passen.
    • Das Layout von Webseiten ist ein komplexer Prozess, bei dem Inhalte für verschiedene Displays dargestellt werden.
    • CSS kann für Menschen, die sich von Anfang an zum Erstellen von Webseiten entschlossen haben, kompliziert wirken, bietet aber tatsächlich viele Möglichkeiten.
    • Um das gewünschte Ergebnis zu erzielen, muss man das passende Werkzeug finden und Inhalte in eine geeignete Form bringen.

  • Zusammenfassung des dritten Kommentars:

    • Um CSS-Positionierung und Zentrierung zu verstehen, hilft ein Verständnis des Box-Modells.
    • Die Eigenschaften display und position sind grundlegend, um Positionierung zu lernen.
    • Dazu gibt es nützliche Artikel auf MDN.

  • Zusammenfassung des vierten Kommentars:

    • Der Artikel ist sehr gut, besonders der interaktive Teil ist beeindruckend.
    • Seit Langem wird eine Website genutzt, die zeigt, wie man Zentrierung in CSS einfach umsetzt.

  • Zusammenfassung des fünften Kommentars:

    • „Zentrierung“ in CSS ist ein klassisches Problem.
    • Dass CSS nicht klar ist, liegt daran, dass es ein komplexes Konstrukt ist, das von mehreren Komitees gleichzeitig entworfen wurde.
    • CSS existiert als Sammlung einzelner Module in ständigem Wandel.
    • Das ist keine wünschenswerte Art der Softwareentwicklung.

  • Zusammenfassung des sechsten Kommentars:

    • CSS hat es auch nach Jahrzehnten nicht geschafft, eine Methode anzubieten, die so effektiv ist wie das Zentrieren mit Tabellen.
    • In dieser Zeit galt die Nutzung von Tabellen für Layoutzwecke als etwas, dessen man sich schämen sollte.

  • Zusammenfassung des siebten Kommentars:

    • Viele Menschen haben Beschwerden über CSS.
    • Ein Hauptproblem ist, dass Stil-Anweisungen miteinander kollidieren oder wirkungslos scheitern.

  • Zusammenfassung des achten Kommentars:

    • Wie im Artikel erwähnt, löst Flexbox das Zentrierungsproblem in einfachen Fällen.
    • Wenn Flexbox nicht ausreicht, versucht man wahrscheinlich etwas Komplexeres als bloße Zentrierung.

  • Zusammenfassung des neunten Kommentars:

    • position: absolute, left: 50%, transform: translateX(-50%) ist die bevorzugte Methode zum Zentrieren.

  • Zusammenfassung des zehnten Kommentars:

    • Dass es so schwierig ist, ein div in CSS zu zentrieren, war der Grund, mit der Webentwicklung aufzuhören.