Ein div zentrieren: alle Methoden im direkten Vergleich
Ein div zentrieren
Ein div zentrieren: 7 CSS-Methoden live im Vergleich | We.Inc
Zentriere ein div horizontal, vertikal oder in beide Richtungen. Schalte Flexbox, Grid, margin auto, absolute Positionierung, text-align und line-height an einer Box um und sieh das CSS sowie die Fälle, in denen jede Methode scheitert.
Ein div in beide Richtungen zu zentrieren braucht zwei Zeilen am Elternelement: display: grid; place-items: center; oder display: flex mit justify-content: center und align-items: center. Nur horizontal gibst du dem div eine Breite und margin-inline: auto. Damit die vertikale Zentrierung sichtbar wird, muss das Elternelement höher sein als das Kind.
Die Kurzfassung
Ziel
CSS am Elternelement
Tailwind
Beide Richtungen
display: grid; place-items: center
grid place-items-center
Beide Richtungen
display: flex; justify-content: center; align-items: center
flex items-center justify-center
Horizontaler Block
(am Kind) margin-inline: auto + eine Breite
mx-auto w-…
Über einem Bild
position: relative, Kind inset: 0 + margin: auto
relative / absolute inset-0 m-auto
Wähle eine Methode und eine Achse, und die Demo-Box bewegt sich, das CSS für Eltern- und Kindelement wird ausgeschrieben, und ein Hinweis sagt, wo diese Methode scheitert. Sieben Techniken werden behandelt, auch die alten, denen du in bestehendem Code noch begegnest, gefolgt von einer Entscheidungstabelle für die Auswahl.
Wähle horizontal, vertikal oder beides.
Klicke dich durch die Methoden. Methoden, die die gewählte Achse nicht beherrschen, sagen das, statt so zu tun als ob.
Lies den Hinweis zum Scheitern der Methode und kopiere dann das CSS oder die Tailwind-Klassen.
Sieh in die Entscheidungstabelle unten, wenn du nicht sicher bist, welche du nehmen sollst.
Wenn sich etwas nicht vertikal zentrieren lässt, gib dem Elternelement zuerst einen Umriss. In neun von zehn Fällen ist es nur so hoch wie sein Inhalt.
Nimm für neuen Code Grid oder Flex. Sie halten das Kind im Fluss, sodass das Elternelement weiterhin um es herum wächst.
Um einen Textblock zu zentrieren und seine Zeilen linksbündig zu lassen, zentriere den Block mit margin-inline: auto und lass text-align in Ruhe.
margin: auto an einem Flex-Kind ist ein netter Trick: Es nimmt freien Platz auf allen Seiten auf und zentriert genau dieses eine Element.
Häufige Fragen
Warum lässt sich mein div nicht vertikal zentrieren?
Meist, weil das Elternelement keine zusätzliche Höhe hat. Ein Block ist nur so hoch wie sein Inhalt, also gibt es keinen Raum, in dem zentriert werden könnte. Gib dem Elternelement eine height, eine min-height (zum Beispiel 100dvh für einen ganzen Bildschirm) oder lass es in einem höheren Flex- oder Grid-Layout strecken.
Was ist der kürzeste Weg, ein div zu zentrieren?
display: grid; place-items: center; am Elternelement. Das zentriert das Kind in beide Richtungen, funktioniert mit jeder Kindgröße und braucht keine Breite oder Höhe am Kind.
Wie zentriere ich ein div auf der ganzen Seite?
Mach body oder einen Wrapper mindestens so hoch wie den Viewport: min-height: 100dvh; display: grid; place-items: center;. Für ein Modal, das über der Seite schwebt, nutze position: fixed; inset: 0; margin: auto; mit fester Breite und Höhe oder das native dialog-Element, das sich selbst zentriert.
Funktioniert margin: 0 auto noch?
Ja, für die horizontale Zentrierung eines Blocks, dessen Breite schmaler ist als die des Elternelements. margin-inline: auto ist die moderne logische Form und lässt die oberen und unteren Abstände unangetastet.
Wie zentriere ich ein div in Tailwind?
Setze flex items-center justify-center oder grid place-items-center auf das Elternelement und gib ihm eine Höhe wie h-screen oder min-h-dvh. Für einen horizontal zentrierten Block ergänze mx-auto und eine Breite oder max-width am Kind.
Zwei Richtungen, zwei verschiedene Probleme
Horizontales Zentrieren ist im Block-Layout einfach, weil die Breite bekannt ist: Die Breite des Elternelements wird durch seinen Container festgelegt, also können automatische Margins den übrigen Platz aufteilen. Bei der Höhe ist es umgekehrt, sie wird vom Inhalt bestimmt, und deshalb brauchte vertikales Zentrieren jahrelang Tricks.
Flexbox und Grid haben das geändert, weil das Elternelement freien Platz auf beiden Achsen verteilen kann. Sobald das Elternelement eine bekannte Höhe hat, erledigen die Ausrichtungseigenschaften den Rest, und das Kind bleibt Teil des normalen Flusses.
Wann die alten Methoden noch sinnvoll sind
Absolute Positionierung ist richtig, wenn das zentrierte Element über anderem Inhalt schweben soll, etwa ein Play-Button über einem Video-Vorschaubild oder ein Spinner über einer Karte. Die Variante mit inset plus margin auto vermeidet die unscharfen Halbpixel-Kanten, die ein translate erzeugen kann.
text-align ist immer noch der schnellste Weg, ein Icon oder einen Inline-Button in einer Textzeile zu zentrieren. Zentrieren mit line-height gehört nur in einzeilige Badges, die du vollständig kontrollierst.
Entscheidungstabelle
Welche Methode für welche Aufgabe
Methode
Horizontal
Vertikal
Beides
Darauf achten
Flexbox
Ja
Ja
Ja
Vertikales Zentrieren setzt voraus, dass das Elternelement höher ist als das Kind. Mit flex-direction: column tauschen die beiden Eigenschaften ihre Achsen.
Grid place-items
Ja
Ja
Ja
Mehrere Kinder stapeln sich in Zeilen, jedes in seiner eigenen Zeile zentriert, sodass sie sich vertikal verteilen, statt zusammenzustehen. Pack sie in ein gemeinsames Element.
margin: auto
Ja
Nein
Nein
Im normalen Blockfluss zentriert es nur horizontal und nur, wenn das Kind schmaler ist als das Elternelement. In einem Flex- oder Grid-Elternelement zentriert margin: auto in beide Richtungen.
Absolute + transform
Ja
Ja
Ja
Das Kind verlässt den Fluss, sodass das Elternelement nicht mehr um es herum wächst. Halbpixel-Versätze können Text unscharf machen, und transform macht das Kind zu einem Containing Block und Stacking Context.
Absolute inset + margin auto
Ja
Ja
Ja
Das Kind braucht auf der zentrierten Achse eine explizite Größe. Ohne sie streckt inset: 0 das Kind einfach auf die Größe des Elternelements. Breiten mit fit-content funktionieren in aktuellen Browsern ebenfalls.
text-align: center
Ja
Nein
Nein
Verschiebt nur Inline-Inhalte: Text, Bilder, inline-block-Boxen. Ein normales Block-div ignoriert es, und der Text im Kind erbt die Zentrierung ebenfalls.
Nein
Ja
Ja
Bricht, sobald der Text in eine zweite Zeile umbricht, und die Höhe muss zweimal fest eingetragen werden. In Ordnung für ein einzeiliges Badge oder einen Button, für sonst nichts.
Rezepte zum Kopieren
Eine Karte in der Mitte des Bildschirms
Auf einer echten Seite nutzt du min-height: 100dvh am Wrapper. Der Rahmen hier nutzt eine feste Höhe, damit er passt.
Play-Button über einem Vorschaubild
inset: 0 mit margin: auto zentriert ein Kind fester Größe ohne transform, sodass die Kanten scharf bleiben.
Ein Element zentriert, die anderen an den Rändern
Automatische Margins an einem Flex-Kind nehmen den gesamten freien Platz ein, sodass das Logo in der Mitte der Leiste sitzt, während Menü und Warenkorb an den Seiten bleiben.
Vertikales Zentrieren setzt voraus, dass das Elternelement höher ist als das Kind. Mit flex-direction: column tauschen die beiden Eigenschaften ihre Achsen.
Mehrere Kinder stapeln sich in Zeilen, jedes in seiner eigenen Zeile zentriert, sodass sie sich vertikal verteilen, statt zusammenzustehen. Pack sie in ein gemeinsames Element.
Im normalen Blockfluss zentriert es nur horizontal und nur, wenn das Kind schmaler ist als das Elternelement. In einem Flex- oder Grid-Elternelement zentriert margin: auto in beide Richtungen.
Das Kind verlässt den Fluss, sodass das Elternelement nicht mehr um es herum wächst. Halbpixel-Versätze können Text unscharf machen, und transform macht das Kind zu einem Containing Block und Stacking Context.
Das Kind braucht auf der zentrierten Achse eine explizite Größe. Ohne sie streckt inset: 0 das Kind einfach auf die Größe des Elternelements. Breiten mit fit-content funktionieren in aktuellen Browsern ebenfalls.
Verschiebt nur Inline-Inhalte: Text, Bilder, inline-block-Boxen. Ein normales Block-div ignoriert es, und der Text im Kind erbt die Zentrierung ebenfalls.
Bricht, sobald der Text in eine zweite Zeile umbricht, und die Höhe muss zweimal fest eingetragen werden. In Ordnung für ein einzeiliges Badge oder einen Button, für sonst nichts.
Probiere jede Zentrierungsmethode aus
Achse
Zentrieren
Methode
Elternelement (gestrichelt) und Kind (blau)
Kind-Box
Diese Methode kann diese Achse nicht. Die Box zeigt, wo sie ohne sie landet.