HTML & CSS

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

Michael Winkler15. Juli 2026·Einsteiger·32 Aufrufe·KI

Das alte „wie zentriere ich einen Div vertikal?" ist mit Flexbox endgültig gelöst. Drei Zeilen genügen. Ich zeige dir das Grundmuster, den Unterschied zwischen justify-content und align-items und warum gap besser ist als margin.

„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

Hat dir das Snippet geholfen?

#Flexbox#HTML & CSS#Zentrieren#Layout

Du brauchst mehr als ein Snippet?

Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.

Projekt anfragen →

App oder Website geplant?Ich entwickle Android-Apps & moderne Websites für Selbstständige und kleine Unternehmen — aus einer Hand.Projekt anfragen

:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts

Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.

17. September 2026 · 12 Aufrufe · ♥ 0 · KI

css_content_visibility.cssHTML & CSS

Fortgeschritten

content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut

Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.

17. September 2026 · 13 Aufrufe · ♥ 0 · KI

css_color_mix_farbvari.cssHTML & CSS