Ausführbare CSS-Docs: div zentrieren

Q: Wie zentriere ich ein div nur horizontal?

Gib ihm eine Breite und automatische seitliche Margins: .box { width: 300px; margin: 0 auto; } (oder max-width für einen responsiven Block). margin-inline: auto ist dasselbe mit logischen Eigenschaften.

Q: Was ist der einfachste Weg, ein div zu zentrieren?

display: grid; place-items: center; am Elternelement: zwei Deklarationen, beide Achsen, jede Größe des Kindes. Nimm Flexbox, wenn das Elternelement auch andere Items in einer Reihe anordnet.

Q: Wie zentriere ich Text in einem div?

Nimm text-align: center am div für Text und Inline-Inhalt. Das div selbst zu zentrieren und den Text darin zu zentrieren, sind zwei getrennte Aufgaben.

Die kurze Antwort

Um ein div horizontal und vertikal in seinem Elternelement zu zentrieren, machst du das Elternelement zu einem Grid und zentrierst seinen Inhalt:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Das funktioniert für jede Größe des Kindes und braucht am Kind selbst nichts. Unten stehen sechs Methoden nebeneinander. Jede Box misst sich nach dem Rendern selbst und gibt aus, wie weit ihre Mitte von der Mitte des Elternelements entfernt ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Alle sechs melden 0px auf beiden Achsen (der 1px-Rahmen der Bühne ist auf jeder Seite gleich und verschiebt die Mitte deshalb nicht). Ändere Breite oder Text einer Box und führ es noch einmal aus: Die Methoden, die nicht von einer festen Größe abhängen, bleiben bei 0.

Welche Methode du nimmst

Methode	Zentriert	Braucht das Kind eine feste Größe?	Am besten für
Grid `place-items: center`	Beide Achsen	Nein	Die Standardwahl: ein Kind in einer Box
Flexbox `justify-content` + `align-items`	Beide Achsen	Nein	Eine Reihe oder Spalte von Items, als Gruppe zentriert
`margin: auto` in einem Flex- oder Grid-Elternelement	Beide Achsen	Nein	Ein Item zentrieren, während seine Geschwister anders angeordnet sind
`margin: 0 auto`	Nur horizontal	Eine `width` oder `max-width`	Seitencontainer, Artikel, Formulare im normalen Fluss
Absolute + `translate(-50%, -50%)`	Beide Achsen	Nein	Overlays, Badges und Modals über anderem Inhalt
Absolute + `inset: 0; margin: auto`	Beide Achsen	Ja, Breite und Höhe	Dialoge mit fester Größe
`align-content: center` an einem Block	Vertikal	Nein	Vertikal zentrieren, ohne das display des Elternelements zu ändern

Methode 1: Flexbox

Flexbox zentriert entlang zweier Achsen mit zwei Eigenschaften. justify-content kümmert sich um die Hauptachse (horizontal in einer Zeile), und align-items um die Querachse:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Bei mehreren Kindern zentriert Flexbox sie als Gruppe und hält sie in einer Reihe. Da ist es Grid überlegen, das die drei Items in einer zentrierten Spalte stapeln würde. Die Seite zu justify-content behandelt jeden Ausrichtungswert.

Methode 2: Grid

place-items: center ist die Kurzschreibweise für align-items: center plus justify-items: center. An einem Grid-Container mit einem einzigen Kind zentriert es dieses Kind in beide Richtungen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height statt height lässt das Elternelement wachsen, wenn die Karte höher als 180px wird, statt dass die Karte überläuft.

Methode 3: margin: 0 auto (horizontal)

Ein Block-Element mit einer Breite, die kleiner als sein Container ist, lässt sich mit automatischen seitlichen Margins horizontal zentrieren. Der Browser teilt den freien Platz gleichmäßig auf beide Seiten auf:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

Die zweite Box füllt die ganze Breite, also gibt es keinen freien Platz, und nichts bewegt sich. Das ist der übliche Grund, warum margin: 0 auto „nicht funktioniert“. Außerdem zentriert es im normalen Fluss nur horizontal; vertikale auto-Margins werden dort zu 0. In einem Flex- oder Grid-Elternelement zentriert margin: auto dagegen in beide Richtungen, das ist die dritte Box im Vergleich oben.

Methode 4: absolute Positionierung und transform

Wenn das Element über anderem Inhalt liegen muss (ein Badge auf einem Foto, ein Modal über der Seite), positionierst du es absolut bei 50% und ziehst es um die Hälfte seiner eigenen Größe zurück:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% setzt die obere linke Ecke des Elements in die Mitte. Die Prozentwerte in translate() beziehen sich auf die eigene Größe des Elements, also zieht -50% es um die Hälfte seiner Breite und Höhe zurück, egal wie groß diese sind. Das Elternelement muss positioniert sein (position: relative), sonst wird das Element stattdessen auf der Seite zentriert. Positionierung behandelt die Seite zu Position.

Eine Variante für Elemente mit bekannter Größe: position: absolute; inset: 0; margin: auto; plus width und height. Die auto-Margins teilen sich den Platz auf allen vier Seiten.

Methode 5: align-content an einem normalen Block

align-content: center funktioniert inzwischen auch an gewöhnlichen Block-Containern, nicht nur an Flex- und Grid-Containern. Es zentriert den Inhalt vertikal, ohne zu ändern, wie die Kinder angeordnet werden:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Es wird in aktuellen Versionen von Chrome, Firefox und Safari unterstützt. Ältere Browser ignorieren es, also nimm Grid, wenn du sie unterstützen musst.

Auf dem ganzen Bildschirm zentrieren

Um einen Dialog unabhängig vom Scrollen im Viewport zu zentrieren, kombinierst du eine fixierte Ebene über den ganzen Bildschirm mit Grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Um den Inhalt einer ganzen Seite vertikal zu zentrieren, nimm min-height: 100dvh am Elternelement statt 100vh: Auf Handys schließt 100vh die Fläche hinter den Symbolleisten des Browsers ein, sodass die „Mitte“ zu tief sitzt.

Text zentrieren ist eine andere Aufgabe

Alles oben zentriert eine Box. Um den Text innerhalb einer Box zu zentrieren, nimmst du text-align: center daran, wie auf der Seite zu HTML Text zentrieren gezeigt. Oft brauchst du beides: Grid, um die Karte zu zentrieren, und text-align, um die Zeilen darin zu zentrieren.

Häufige Fehler

Ein Elternelement ohne Höhe. Vertikales Zentrieren braucht freien Platz; ein Elternelement, das auf seinen Inhalt schrumpft, hat keinen.
margin: 0 auto an einem Block in voller Breite. Gib ihm zuerst eine width oder max-width.
margin: auto, um im normalen Fluss vertikal zu zentrieren. Vertikale auto-Margins sind dort 0; nimm Flex oder Grid.
Absolut zentrieren ohne positioniertes Elternelement. Das Element wird auf der Seite zentriert, nicht in der Box.
align-items: center am Kind. Ausrichtungseigenschaften gehören ans Elternelement (den Flex- oder Grid-Container), außer margin: auto und align-self.
text-align: center, um einen Block zu zentrieren. Es zentriert Inline-Inhalt (Text, Bilder, inline-block-Kinder), kein Block-Kind.

Häufig gestellte Fragen

Wie zentriere ich ein div horizontal und vertikal?

Mach das Elternelement zu einem Grid und zentriere seinen Inhalt: .parent { display: grid; place-items: center; }. Die Flexbox-Variante lautet display: flex; justify-content: center; align-items: center;. In beiden Fällen braucht das Elternelement eine Höhe, die größer als das div ist.

Wie zentriere ich ein div nur horizontal?

Gib ihm eine Breite und automatische seitliche Margins: .box { width: 300px; margin: 0 auto; } (oder max-width für einen responsiven Block). margin-inline: auto ist dasselbe mit logischen Eigenschaften.

Warum zentriert margin: 0 auto mein div nicht?

Das div hat keine Breite, die kleiner als sein Container ist, also gibt es keinen freien Platz zum Aufteilen (ein Block füllt standardmäßig die volle Breite). Setz width oder max-width. An Inline-Elementen bewirkt es außerdem nichts, und im normalen Fluss zentriert es nie vertikal.

Warum zentriert sich mein div nicht vertikal?

Das Elternelement ist nur so hoch wie sein Inhalt, also gibt es keinen zusätzlichen Platz, in dem zentriert werden kann. Gib dem Elternelement eine Höhe (oder min-height) und nimm dann Grid oder Flexbox zum Zentrieren.

Was ist der einfachste Weg, ein div zu zentrieren?

display: grid; place-items: center; am Elternelement: zwei Deklarationen, beide Achsen, jede Größe des Kindes. Nimm Flexbox, wenn das Elternelement auch andere Items in einer Reihe anordnet.

Wie zentriere ich Text in einem div?

Nimm text-align: center am div für Text und Inline-Inhalt. Das div selbst zu zentrieren und den Text darin zu zentrieren, sind zwei getrennte Aufgaben.

Verwandte Konzepte