Div in CSS zentrieren: horizontal, vertikal und beides (Flexbox, Grid)

Ein div in CSS zu zentrieren hat lange Tricks verlangt. Das ist vorbei: Drei Zeilen Flexbox zentrieren jedes Element in seinem Container, horizontal wie vertikal. Dieser Artikel beginnt mit dieser kurzen Antwort und geht danach jede Situation durch, vom Zentrieren eines Bildes bis zu dem eines Buttons, mit der Grid-Alternative und den Fehlern, die glauben lassen, „es funktioniert nicht“.

Die kurze Antwort

.conteneur {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
}

<div class="conteneur">
  <div class="boite">Je suis centrée</div>
</div>

Beide Eigenschaften gehören auf das Elternelement, nie auf das zu zentrierende Element. Und die vertikale Zentrierung wird nur sichtbar, wenn das Elternelement höher ist als sein Inhalt: Das prüfst du zuerst, wenn sich nichts bewegt.

Horizontal zentrieren

Mit Flexbox

justify-content verteilt die Kinder entlang der Hauptachse, die standardmäßig horizontal liegt. center schiebt sie in der Mitte zusammen.

.conteneur {
  display: flex;
  justify-content: center;
  gap: 1rem; /* Abstand zwischen mehreren zentrierten Kindern */
}

Bei mehreren Kindern bleiben sie nebeneinander und werden als Gruppe zentriert. So ist es bei den zwei Absätzen und den zwei Bildern aus dem ursprünglichen Beispiel dieses Artikels.

Mit margin auto

Ohne Flexbox zentriert sich ein Block mit bekannter Breite über automatische Ränder:

.boite {
  width: 320px;      /* oder max-width: unverzichtbar */
  margin: 0 auto;
}

Ohne width oder max-width nimmt die Box die gesamte verfügbare Breite ein, und die automatischen Ränder sind null. Das ist die Methode, die du dir für eine zentrierte Inhaltsspalte auf einer Seite merken solltest.

Mit text-align

text-align: center zentriert den Inline-Inhalt eines Blocks: Text, einen Link, ein inline-Bild. Es zentriert nicht den Block selbst in seinem Elternelement.

.titre {
  text-align: center; /* zentriert den Text innerhalb von .titre */
}

Vertikal zentrieren

align-items steuert die Querachse, standardmäßig die vertikale. Der Container braucht eine Höhe, damit die Zentrierung sichtbar wird.

.conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}

Um nur ein einziges Kind vertikal zu zentrieren und die anderen oben zu lassen, kommt align-self auf dieses Kind:

.conteneur .dernier {
  align-self: center;
}

Eine andere, oft kürzere Schreibweise: margin: auto auf dem Kind eines Flex-Containers zentriert es in beide Richtungen, indem es den gesamten freien Raum aufnimmt.

.conteneur { display: flex; height: 300px; }
.boite     { margin: auto; }

Auf der ganzen Seite zentrieren

Ein Login-Bildschirm, eine Fehlermeldung, eine Warteseite: Das Element gehört in die Mitte des Fensters. Der Container nimmt mit min-height: 100vh die gesamte sichtbare Höhe ein.

body {
  margin: 0;
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 100 % der Fensterhöhe */
}

min-height statt height: Geht der Inhalt auf einem kleinen Bildschirm über das Fenster hinaus, wächst der Container, statt abzuschneiden. Auf dem Handy ist 100dvh (dynamische Höhe, die die Browserleisten berücksichtigt) noch genauer und wird von den aktuellen Browsern unterstützt.

Ein Bild zentrieren

Ein Bild ist ein Inline-Element: In einem Block zentriert text-align: center auf dem Elternelement es horizontal. Um es in beide Richtungen oder in einem Rahmen fester Größe zu zentrieren, ist Flexbox einfacher.

/* Nur horizontal */
figure {
  text-align: center;
}

/* Horizontal und vertikal, in einem quadratischen Thumbnail */
.vignette {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.vignette img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Ein einzelnes Bild in einer Spalte lässt sich auch als Block zentrieren: display: block; margin: 0 auto; mit einer Breite oder einer Maximalbreite.

Text und Button zentrieren

Text zentrierst du mit text-align: center auf seinem Block. Ein Button ist ein inline-block-Element: Dieselbe Eigenschaft auf dem Elternelement zentriert ihn horizontal.

.actions {
  text-align: center;
}

/* Um mehrere Buttons mit gleichmäßigem Abstand zu zentrieren */
.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

Um den Text innerhalb eines Buttons fester Höhe zu zentrieren, wird der Button selbst zum Flex-Container: display: inline-flex; align-items: center; justify-content: center;.

Die Grid-Alternative: eine einzige Zeile

CSS Grid zentriert ein einzelnes Kind mit einer Deklaration:

.conteneur {
  display: grid;
  place-items: center; /* align-items + justify-items */
  min-height: 100vh;
}

Grid und Flexbox liefern hier dasselbe Ergebnis. Grid ist für ein einzelnes Element kürzer; Flexbox bleibt natürlicher, um eine Reihe von Elementen auszurichten. Die Wahl zwischen beiden Modellen für ein komplettes Layout behandelt Grid oder Flexbox.

position absolute + transform: der Fall der Überlagerungen

Wenn das zu zentrierende Element aus dem Fluss genommen ist, etwa ein Tooltip oder ein modales Fenster über der Seite, positioniert man es auf 50 % und zieht es dann um die Hälfte seiner eigenen Größe zurück:

.parent {
  position: relative;
}

.modale {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Die Methode funktioniert, ohne die Größe des Elements zu kennen, kann den Text aber leicht unscharf machen, wenn die Verschiebung auf einem halben Pixel landet. Für ein bildschirmfüllendes Modal vermeidet ein Container mit position: fixed; inset: 0; display: grid; place-items: center; das Problem.

Warum „es funktioniert nicht“: die fünf Fehler

1. Das Elternelement hat keine Höhe. Die vertikale Zentrierung bezieht sich auf die Höhe des Containers; ohne Höhe gibt es nichts zu zentrieren. Ergänze min-height.
2. Die Eigenschaften stehen auf dem Kind. justify-content und align-items gehören auf das Elternelement. Auf dem Kind wirken nur align-self und margin: auto.
3. margin: 0 auto ohne Breite. Der Block nimmt bereits 100 % ein: Gib ihm eine width oder eine max-width.
4. text-align: center, um ein div zu zentrieren. Es zentriert den Text darin, nicht die Box. Nimm Flexbox oder die automatischen Ränder.
5. height: 100%, das nichts bewirkt. Eine Höhe in Prozent gilt nur, wenn das Elternelement selbst eine definierte Höhe hat, bis hinauf zu html. 100vh oder 100dvh hängen nicht vom Elternelement ab.

Zusammenfassung

Wer über das Zentrieren hinauswill: Der vollständige Flexbox-Guide geht alle Eigenschaften des Containers und der Kinder durch.