Zentrieren war lange eine der lästigsten Aufgaben in CSS. Mit Flexbox und Grid ist daraus eine Zeile geworden.
- Zentrieren
Ein Element oder seinen Inhalt mittig ausrichten.
Beispiel: „Zentrieren heißt je nach Fall etwas anderes: den Text in der Box oder die Box in ihrem Platz.“
Die drei Fälle
/* Text in seiner Box */
.titel { text-align: center; }
/* Box im verfügbaren Platz */
.inhalt { max-width: 70ch; margin-inline: auto; }
/* beides, waagerecht und senkrecht */
.mitte { display: grid; place-items: center; }Der erste Fall betrifft den Inhalt, der zweite die Box selbst, der dritte beide Richtungen. Wer den falschen Fall erwischt, wundert sich, warum nichts passiert.
Warum es früher schwer war
Senkrecht zu zentrieren hatte vor Flexbox keine saubere Lösung; es gab Tricks mit Positionierung und negativen Abständen, die bei unbekannter Höhe scheiterten. Heute sind es zwei Zeilen, und das ist einer der größten praktischen Gewinne der neueren Layoutverfahren.