Een div centreren in CSS (Flexbox)
Bouw visueel een CSS-flexbox-indeling: flex-direction, justify-content, align-items, flex-wrap en gap op de container, plus flex-grow, flex-shrink en flex-basis per kind, allemaal met een live preview en kopieerbare CSS.
Resultaat
Hier is het directe antwoord op de meest gestelde vraag in CSS: om een div te centreren, plaatst u display: flex, justify-content: centreren en uitlijnen-items: centreren op de ouder. Dat is alles: drie verklaringen op de container, en het kind zit er zowel horizontaal als verticaal perfect gecentreerd in, in elke maat. Deze pagina opent de generator met precies die combinatie die al is toegepast, dus het onderstaande voorbeeld laat zien dat deze momenteel aan drie genummerde vakken werkt.
Vóór flexbox had het centreren van een div hacks nodig: marge: 0 auto alleen horizontaal gecentreerd en werkte alleen op een blok met vaste breedte; verticaal centreren betekende positie: absoluut met negatieve marges of een transformatietruc, beide kwetsbaar op het moment dat de inhoud van grootte veranderde. justify-content zorgt voor de hoofdas en align-items voor de dwarsas – samen centreren ze in beide richtingen, ongeacht hoe lang of breed het kind is, wat precies de reden is waarom dit paar het standaardantwoord werd.
Sleep een besturingselement hieronder en zie hoe de drie voorbeeldvakken gecentreerd blijven terwijl de container van vorm verandert, of er een opening tussen ontstaat. Als het er goed uitziet, kopieert u het CSS-blok onderaan rechtstreeks naar uw stylesheet. Het werkt op dezelfde manier in elke moderne browser, er is geen bibliotheek nodig.