CSS zentrieren
Elemente horizontal und vertikal zentrieren: passende Methode für Text, Blöcke, Bilder und unbekannte Größen mit Vorschau und Code.
CSS zentrieren zeigt für jeden Fall die passende Methode: Text, Blöcke mit fester Breite oder Elemente unbekannter Größe, horizontal, vertikal oder beides. Jede Lösung hat eine Live-Vorschau und kopierbaren Code, von place-items: center über Flexbox bis zur absoluten Positionierung mit translate.
Passende Methoden
Kürzeste Lösung für alle Fälle. Das Elternelement wird zum Grid.
.parent {
display: grid;
place-items: center;
}Welche Methode wann?
| Methode | Horizontal | Vertikal | Einsatz |
|---|---|---|---|
place-items: center | ✓ | ✓ | Alles, kürzester Code |
| Flexbox | ✓ | ✓ | Mehrere Kinder, Navigation |
text-align: center | ✓ | – | Text, Bilder, Buttons |
margin-inline: auto | ✓ | – | Container mit Breite |
Absolut + translate | ✓ | ✓ | Overlays, Badges |
align-content: center | – | ✓ | Normale Blöcke (neu) |
Mehr zu Flex und Grid findest du im Flexbox-Playground und im CSS-Grid-Generator.
Häufige Fragen
Wie zentriere ich ein div horizontal und vertikal?
Am kürzesten mit display: grid und place-items: center am Elternelement. Das Elternelement braucht eine Höhe, etwa min-height: 100vh für die ganze Seite. Flexbox mit justify-content und align-items funktioniert genauso.
Warum zentriert vertical-align nicht?
vertical-align wirkt nur auf Inline-Elemente innerhalb einer Zeile und auf Tabellenzellen, nicht auf Blöcke. Für Blöcke nimmst du Grid, Flexbox oder neuerdings align-content: center.
Warum wird mein Element nicht vertikal zentriert?
Meist hat das Elternelement keine eigene Höhe. Ohne Höhe ist es genau so hoch wie sein Inhalt, und es gibt nichts zu zentrieren. Setze height oder min-height am Elternelement.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.