Ein einzelnes div mittig in seinem Container zu platzieren, gilt als Anfängerübung. CSS-Experte Temani Afif zeigt auf einer einzigen Seite trotzdem 100 verschiedene Lösungen dafür. Die meisten sollten Sie nie einsetzen, denn Afif sammelt sie vor allem zur Belustigung der Branche.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Ein div in CSS zentrieren klingt nach einer Frage von zwei Zeilen Code. Temani Afif hat daraus eine Sammlung von genau 100 Methoden gemacht, sauber durchnummeriert und mit einem Kopier-Button pro Variante. Die hakeligen Lösungen markiert er rot, mit einer klaren Ansage: Finger weg.
Das Wichtigste in Kürze
- Temani Afif hat 100 Wege gesammelt, ein einzelnes Element horizontal und vertikal zu zentrieren.
- Viele Varianten nutzen bewusst hakelige Tricks mit float, line-height oder table-cell und dienen nur der Illustration.
- Für die Praxis genügen drei saubere Lösungen mit Grid und Flexbox.
- Afif betreibt mehrere bekannte CSS-Ressourcen und gehört zu den aktivsten CSS-Stimmen weltweit.
Warum braucht ein div 100 Zentrier-Methoden?
Ein Widerspruch steht im Mittelpunkt der Seite. Ein triviales Ziel trifft auf eine überraschend große Zahl an Lösungswegen. Afifs Sammlung reiht Grid-, Flexbox-, Positionierungs- und Container-Query-Varianten aneinander, dazu Konstruktionen mit float, vertical-align und sogar line-height. Die abwegigen Methoden kennzeichnet er farblich und rät offen davon ab. Schon 2024 hatte DrWeb in einem eigenen Ratgeber zu CSS zentrieren gezeigt, dass fünf Methoden für den Alltag locker reichen.
Welche Methoden sollten Sie wirklich nutzen?
Für moderne Layouts bleibt die Auswahl klein. Grid zentriert ein Kind zuverlässig in beide Richtungen, mit zwei Zeilen Code. Für maximale Browser-Kompatibilität greifen Sie zur klassischen Flexbox-Variante. Alles Weitere auf der Liste dient dem Experiment und gehört nicht in den Produktivcode.
/* Grid, am kürzesten */
.container { display: grid; place-content: center; }
/* Grid, wenn das Element seine Inhaltsgröße behalten soll */
.container { display: grid; place-items: center; }
/* Flexbox, klassisch und maximal kompatibel */
.container { display: flex; align-items: center; justify-content: center; }Die Trennung zwischen sauberem und hakeligem CSS zieht sich durch Afifs ganzes Werk, ähnlich wie bei den sieben Prinzipien für sauberes CSS.
Afif macht aus einer Anfängerfrage eine Materialsammlung, von der selbst Profis noch lernen. Solche Leute halten das offene Web am Laufen, ohne je eine Rechnung zu stellen.
— Michael Dobler, Herausgeber Dr. Web
Was steckt hinter css-generators.com?
Ein einzelner Entwickler trägt das Projekt. Temani Afif gilt als einer der produktivsten CSS-Spezialisten überhaupt und gehört zu den aktivsten Beantwortern von CSS-Fragen auf Stack Overflow. Neben css-generators.com betreibt er css-tip.com, css-loaders.com, css-shape.com und css-pattern.com, schreibt für CSS-Tricks, Smashing Magazine, SitePoint und Frontend Masters und ist W3Schools-zertifiziert. Im Mai 2026 hat er auf CSS-Tricks zusätzlich den Beitrag „The State of CSS Centering in 2026″ veröffentlicht, der die Zentrier-Frage systematisch einordnet. Seine Sammlung der 100 Methoden liefert dazu die unterhaltsame Fußnote.
Für die tägliche Arbeit lohnt sich ein Lesezeichen auf zwei der sauberen Varianten, nicht auf alle hundert. Speichern Sie sich das Grid-Snippet und die Flexbox-Variante, und schlagen Sie bei Sonderfällen wie fixer Höhe gezielt auf Afifs Seite nach. Den Rest dürfen Sie getrost den roten Codes überlassen. Wie modernes CSS Ihnen ohnehin immer mehr Handarbeit abnimmt, zeigt unser Überblick zu modernem CSS 2026.
