Hoe centreer je een div in CSS (Flexbox)
Bouw visueel een CSS-flexbox-lay-out: flex-direction, justify-content, align-items, flex-wrap en gap op de container, plus voor elke child flex-grow, flex-shrink en flex-basis, allemaal met een live voorbeeld en kopieerbare CSS.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Hier is het directe antwoord op de meestgestelde vraag in CSS: om een div te centreren zet je display: flex, justify-content: center en align-items: center op de ouder ervan. Dat is alles — drie declaraties op de container, en de child zit perfect gecentreerd, zowel horizontaal als verticaal, bij elk formaat dat je eraan geeft. Deze pagina opent de generator met precies die combinatie al toegepast, dus het voorbeeld hieronder laat meteen zien hoe het werkt op drie genummerde vakken.
Vóór flexbox had je hacks nodig om een div te centreren: margin: 0 auto centreerde alleen horizontaal en werkte alleen bij een blok met een vaste breedte; verticaal centreren betekende position: absolute met negatieve margins of een transform-truc, beide kwetsbaar zodra de content van grootte veranderde. justify-content regelt de hoofdas en align-items regelt de kruisas — samen centreren ze in beide richtingen, ongeacht hoe hoog of hoe breed de child is, en precies daarom is dit paar het standaardantwoord geworden.
Sleep hieronder een willekeurige instelling en zie hoe de drie voorbeeldvakken gecentreerd blijven terwijl de container van vorm verandert, of voeg een gap tussen de vakken toe. Als het er goed uitziet, kopieer je het CSS-blok onderaan rechtstreeks in je stylesheet — het werkt hetzelfde in elke moderne browser, er is geen library voor nodig.