Etwas mittig zentrieren mit Flexbox – horizontal und vertikal in drei Zeilen

„Wie zentriere ich einen Kasten horizontal und vertikal?" war jahrelang die meistgestellte CSS-Frage. Mit Flexbox sind es heute drei Zeilen.

Das Grundmuster

.box {
  display: flex;
  justify-content: center;  /* zentriert auf der Hauptachse (waagerecht) */
  align-items: center;      /* zentriert auf der Querachse (senkrecht) */
  min-height: 100dvh;       /* Container muss eine Höhe haben */
}

<div class="box">
  <div class="karte">Ich sitze exakt in der Mitte.</div>
</div>

Das war's. Der Inhalt sitzt mittig – egal wie groß er ist.

Der Merksatz zu den zwei Achsen

• justify-content wirkt entlang der Hauptachse (bei flex-direction: row also waagerecht).
• align-items wirkt entlang der Querachse (dann senkrecht).

Drehst du die Richtung auf flex-direction: column, tauschen die beiden ihre Bedeutung – das ist der häufigste Stolperstein. Merke dir: justify = in Flussrichtung, align = quer dazu.

Abstände: gap statt margin

Wenn mehrere Elemente nebeneinander liegen, setzt du die Abstände nicht mehr per margin, sondern mit gap:

.leiste {
  display: flex;
  gap: 16px;              /* gleichmäßiger Abstand zwischen allen Kindern */
  flex-wrap: wrap;        /* bricht auf schmalen Screens sauber um */
}

gap erzeugt keine störenden Ränder am Anfang oder Ende und braucht keine „letztes Element ohne margin"-Ausnahme mehr. Zusammen mit flex-wrap: wrap wird die Leiste automatisch mobil-tauglich.

Flexbox ist mein Standard-Werkzeug für Leisten, Karten und Zentrierung. Mehr HTML- & CSS-Snippets findest du auf code.bymw.de.

Quellen

• CSS Flexible Box Layout — MDN
• CSS Flexible Box Layout Module Level 1 — W3C