Wie man mit modernem CSS alles zentriert

Das Zentrieren in CSS hat den Ruf, schwieriger zu sein, als es sein sollte. Man versucht text-align: center auf einem div, nichts bewegt sich. Man fügt margin: auto hinzu, das Element zentriert sich horizontal, aber nicht vertikal. Man sucht nach einer Lösung, findet fünf verschiedene Antworten, und keine davon erklärt warum sie funktionieren.

Das eigentliche Problem ist, dass CSS mehrere Layout-Kontexte hat, und jeder davon behandelt die Ausrichtung unterschiedlich. Sobald man versteht, in welchem Kontext man arbeitet, wird das Zentrieren unkompliziert. Hier ist, was heute tatsächlich funktioniert.

Verstehen Sie zuerst den Layout-Kontext

Bevor Sie eine Technik auswählen, stellen Sie sich eine Frage: Welches Layout-System verwendet das Elternelement?

Die Zentrierung verhält sich unterschiedlich in Flow-Layout, Flexbox und Grid. Die Anwendung der falschen Methode im falschen Kontext ist der Grund, warum sich das Zentrieren inkonsistent anfühlt. Die drei Szenarien, denen Sie am häufigsten begegnen werden, sind:

• Zentrieren von Inline-Inhalten (Text, Links) innerhalb eines Blocks
• Horizontales Zentrieren eines Block-Elements innerhalb seines Elternelements
• Zentrieren eines Elements sowohl horizontal als auch vertikal

Zentrieren von Inline-Inhalten mit text-align

Für Text, Links und andere Inline-Elemente ist text-align: center auf dem Elternelement alles, was Sie brauchen:

.card-header {
  text-align: center;
}

Dies betrifft nur Inline-Inhalte innerhalb des Containers. Es wird den Container selbst nicht verschieben. Ein häufiger Fehler ist die Anwendung von text-align: center in der Erwartung, dass sich ein div in der Position verschiebt — das wird es nicht.

Horizontales Zentrieren mit margin-inline: auto

Um ein Block-Element horizontal innerhalb seines Elternelements zu zentrieren, verwenden Sie automatische Margins. Die moderne Schreibweise verwendet logische Eigenschaften:

.content {
  width: 680px;
  margin-inline: auto;
}

margin-inline: auto entspricht margin-left: auto; margin-right: auto, respektiert aber die Schreibrichtung, was für internationalisierte Layouts wichtig ist. Dies ist das richtige Werkzeug für die Zentrierung von Seiten-Wrappern, Artikel-Containern und Formularen. Das Element muss schmaler als sein Container sein, damit verbleibender horizontaler Raum vorhanden ist, den die automatischen Margins verteilen können.

CSS-Flexbox-Zentrierung: Horizontal und vertikal

Flexbox ist die praktischste moderne CSS-Zentrierungstechnik für die Ausrichtung von Elementen innerhalb eines Containers, insbesondere wenn Sie mehrere Kindelemente haben oder Richtungskontrolle benötigen:

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
  min-height: 100dvh;
}

Hinweis: Verwenden Sie min-height: 100dvh anstelle von height: 100vh für Vollbild-Layouts. Die dvh-Einheit berücksichtigt die dynamische Browser-UI auf Mobilgeräten (Adressleisten, Symbolleisten), was 100vh nicht korrekt handhabt. Dynamische Viewport-Einheiten werden jetzt in modernen Browsern weitgehend unterstützt und unter https://webstatus.dev/features/viewport-unit-variants nachverfolgt.

justify-content steuert die Ausrichtung entlang der Hauptachse. align-items steuert die Querachse. Zusammen zentrieren sie jedes Kindelement unabhängig von seinen Abmessungen. Dies ist die richtige Wahl, wenn Sie mehrere Elemente zentrieren oder Abstands- und Richtungskontrolle benötigen.

CSS-Grid-Zentrierung: Der kürzeste Weg

Für die Zentrierung eines einzelnen Elements innerhalb eines Containers ist CSS Grid mit place-items die prägnanteste Option:

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

place-items: center ist eine Kurzschreibweise für align-items: center und justify-items: center. Es zentriert das Kindelement auf beiden Achsen in zwei Deklarationen. Wenn Sie nur ein Element zentrieren müssen und keine komplexe Layout-Logik benötigen, ist dies der sauberste Ansatz.

Sie können die Zentrierung auch von der Kindseite aus anwenden, indem Sie place-self: center oder margin: auto auf ein Grid-Element verwenden, was nützlich ist, wenn Sie das CSS des Elternelements nicht kontrollieren.

Welche Methode sollten Sie verwenden?

Ein Hinweis zu neueren CSS-Funktionen

CSS Anchor Positioning ermöglicht es Ihnen, ein Element relativ zu einem anderen spezifischen Element auszurichten — nützlich für Tooltips, Popovers und angehängte UI. Die Funktion hat kürzlich die Verfügbarkeit in modernen Browsern erreicht und wird unter https://webstatus.dev/features/anchor-positioning nachverfolgt. Für die allgemeine Seitenzentrierung bleiben Flexbox und Grid jedoch der zuverlässige Standard, den Entwickler heute verwenden.

Fazit

Das Zentrieren in CSS hört auf, frustrierend zu sein, sobald man die Technik an den Layout-Kontext anpasst. Verwenden Sie margin-inline: auto für horizontales Flow-Layout, Flexbox beim Ausrichten mehrerer Elemente und Grid place-items: center, wenn Sie einfach etwas in der Mitte benötigen. Das deckt die große Mehrheit dessen ab, was Ihnen in der realen Frontend-Arbeit begegnen wird.

Häufig gestellte Fragen

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.