Float war lange der Standard, wenn es darum ging, Elemente auf einer Seite zu positionieren. Für horizontale Zentrierung gab es dabei einen Trick – aber 2026 gibt es bessere Wege.
Der Float-Trick – funktioniert, aber zeigt sein Alter
Der Klassiker sieht so aus:
.center {
float: left;
position: relative;
left: 50%;
transform: translateX(-50%);
}
Das Element wird mit float: left aus dem normalen Fluss genommen, mit left: 50% zur Mitte verschoben und dann mit translateX(-50%) um die Hälfte der eigenen Breite zurückgezogen. Klingt umständlich – weil es das ist.
Der Trick funktioniert, hat aber Nebenwirkungen: Das Parent-Element kollabiert, weil floatende Kinder nicht mitgezählt werden. Du brauchst einen Clearfix oder overflow: hidden am Container. In modernen Projekten würde ich das nicht mehr anfassen.
Flexbox – mein Standardweg
Für die meisten Zentrierungs-Aufgaben reicht Flexbox vollständig aus:
.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertikal */
}
Das funktioniert für horizontale Zentrierung, vertikale Zentrierung oder beides gleichzeitig. Kein Positions-Hacking, keine Clearfix-Probleme. Browser-Support: vollständig seit IE 11 – und IE 11 ist seit 2022 offiziell tot.
CSS Grid – wenn du ohnehin ein Layout baust
Wenn der Container sowieso ein Grid-Layout ist, gibt es eine noch knappere Lösung:
.container {
display: grid;
place-items: center;
}
place-items ist die Kurzform für align-items und justify-items zusammen. Ein Grid-Cell wird damit in beiden Achsen zentriert. Für einzelne Elemente in einem Layout-Grid ist das die sauberste Variante.
Wann noch Float?
Float hat 2026 noch einen sinnvollen Anwendungsfall: Text, der um ein Bild herumfließen soll. Genau das wurde Float ursprünglich für erfunden. Alles andere übernehmen Flexbox und Grid.
Den Float-Trick zur Zentrierung würde ich nur noch in Legacy-Code anfassen, der kein Flexbox verträgt – und solche Projekte sind mittlerweile selten.
Centering Elements with CSS: Flexbox, Grid, and the Float Trick
Float used to be the go-to tool for positioning elements on a page. Centering with float required a workaround – but in 2026, there are much cleaner approaches.
The Float Trick – works, but shows its age
.center {
float: left;
position: relative;
left: 50%;
transform: translateX(-50%);
}
The element is pulled out of the normal flow with float: left, shifted to the center with left: 50%, then pulled back by half its own width using translateX(-50%). It works, but it comes with side effects: the parent element collapses because floated children aren’t counted in its height. You’d need a clearfix or overflow: hidden on the container. Not something I’d use in new projects.
Flexbox – the standard approach
.container {
display: flex;
justify-content: center;
align-items: center;
}
Handles horizontal centering, vertical centering, or both at once. No position hacking, no clearfix issues. Browser support is complete – IE 11 has been end-of-life since 2022.
CSS Grid – when you’re already building a layout
.container {
display: grid;
place-items: center;
}
place-items is shorthand for align-items and justify-items combined. If the container is already a grid, this is the cleanest option.
When does float still make sense?
Float still has one legitimate use case: wrapping text around an image. That’s what it was originally designed for. For layout and centering, Flexbox and Grid have taken over completely.
