CSS centreren met Flexbox, Grid en Absoluut
Met de Div Centreren Generator maak je snel de juiste code voor het centreren van elementen op jouw pagina. Kies de gewenste as en layout-methode om het resultaat direct in de live preview te zien. De bijbehorende CSS-code verschijnt direct onder de preview en kan meteen gekopieerd worden naar jouw eigen stylesheet. De tool draait volledig in je browser, zonder uploads of accounts.
Stappenplan voor div centreren in de generator
- Selecteer de gewenste as waarop het element uitgelijnd moet worden. Kies Beide voor centreren op zowel de horizontale als verticale as.
- Kies de layout-methode die past bij jouw structuur: Flexbox, Grid of Absoluut.
- Kopieer de gegenereerde CSS-declaraties onder de preview en voeg deze toe aan de gewenste
.containerof.childselector in je stylesheet.
Drie methodes voor css centreren vergeleken
Flexbox is de meest gebruikte optie. Door display: flex op de parent te zetten, sturen justify-content: center (hoofdas) en align-items: center (dwarsas) de positie van het child-element aan.
Grid biedt de kortste code voor centrering op beide assen. Met display: grid en place-items: center op het ouder-element bereik je hetzelfde effect in slechts twee regels CSS.
Absoluut positioneren vereist position: relative op de parent en position: absolute op het child. De combinatie top: 50%; left: 50%; transform: translate(-50%, -50%); verschuift het element exact naar het midden door te corrigeren voor de eigen afmetingen van het kind-element.
Tekst centreren css vs een container uitlijnen
Voor het uitlijnen van gewone tekst in een alinea gebruik je de eigenschap text-align: center op het ouder-element. Dit werkt voor inline-inhoud, maar verplaatst de container zelf niet.
Wanneer je een hele div, knop of een ander blok-element op de pagina wilt plaatsen, gebruik je de Flexbox- of Grid-technieken uit deze generator. Zo blijft de documentstroom overzichtelijk en voorkom je conflicten tussen tekst- en containeruitlijning.
Afbeelding centreren css en elementen in de documentstroom
Het uitlijnen van een afbeelding volgt dezelfde regels als het centreren van een div. Wikkel de afbeelding in een ouder-container en stel daar Flexbox of Grid op in.
Let op bij absolute positionering: doordat het child-element uit de normale documentstroom wordt gehaald, kan een parent-container zonder vaste hoogte inklappen als er geen andere inhoud aanwezig is.
Veelgestelde vragen
Hoe centreer ik een div horizontaal en verticaal in CSS?
De kortste manier met Flexbox is om display: flex, justify-content: center en align-items: center in te stellen op het parent-element. Bij Grid stel je display: grid en place-items: center in op de parent. Selecteer "Beide" in de generator om de exacte code voor jouw layout te kopiëren.
Hoe centreer ik een div in CSS zonder Flexbox?
Met CSS Grid bereik je dit door display: grid en place-items: center op de parent te zetten. Een alternatief is absolute positionering met position: relative op de parent en position: absolute met top: 50%, left: 50% en transform: translate(-50%, -50%) op het child.
Hoe centreer ik een div met CSS Grid?
Stel display: grid in op de parent en voeg place-items: center toe om het child-element op beide assen tegelijk te centreren. Voor slechts één as gebruik je justify-content: center (horizontaal) of align-items: center (verticaal).
Hoe centreer ik een div met position absolute?
Geef de parent position: relative als positioneringscontext en geef het child position: absolute met top: 50% en left: 50%. Voeg op het child ook transform: translate(-50%, -50%) toe om het element exact te centreren op basis van zijn eigen breedte en hoogte.
Waarom werkt justify-content: center niet?
De eigenschap justify-content werkt alleen binnen een flex- of grid-container en doet niets als display: flex of display: grid ontbreekt op de parent. Bij een standaard flex-container regelt justify-content de horizontale as en align-items de verticale as; het verwisselen van deze twee is de meest voorkomende oorzaak.
Hoe centreer ik een knop of afbeelding in CSS?
Een knop of afbeelding centreer je exact hetzelfde als een div: plaats het element in een parent en geef die parent display: flex, justify-content: center en align-items: center. Er is geen extra CSS nodig op de knop of afbeelding zelf.
Aanbevolen
-
HTML & CSS Spiekwenskaart Bureau-onderleggerFlexbox, grid en de rest van CSS direct onder je toetsenbord, zonder te tabben.
-
HTML en CSS: Ontwerpen en bouwen van websites (Jon Duckett)Het toegankelijkste beginnersboek over layouts, van losse kaders tot complete pagina's.
-
KYY 15,6-inch Draagbare MonitorCodeer op het ene scherm en bekijk de live pagina op het andere.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
