Zentrieren

Unsere Section mit den Karten ist 80 % breit, sitzt aber am linken Rand der Seite. Um sie zu zentrieren, verwenden wir eine der häufigsten Deklarationen in CSS:

margin: 0 auto;

Der erste Wert, 0, ist der Außenabstand oben und unten. Der zweite, auto, ist der Außenabstand links und rechts: Der Browser teilt den freien Platz neben dem Element gleichmäßig zwischen ihnen auf, sodass das Element in der Mitte landet.

Das funktioniert nur, wenn das Element eine Breite hat, wie unser width: 80%. Ohne sie ist das Element so breit wie sein Elternelement, und es gibt keinen freien Platz zum Aufteilen.

Verwechsle es nicht mit text-align: center: Das zentriert den Text innerhalb seiner Box, während margin: 0 auto die Box selbst zentriert.