Een div centreren: 7 CSS-methoden, live en vergeleken | We.Inc
Centreer een div horizontaal, verticaal of beide. Schakel tussen flexbox, grid, margin auto, absolute positionering, text-align en line-height op één box, bekijk de CSS en zie wanneer elke methode faalt.
Een div in beide richtingen centreren kost twee regels op de parent: display: grid; place-items: center; of display: flex met justify-content: center en align-items: center. Voor alleen horizontaal geeft u de div een breedte en margin-inline: auto. De parent moet hoger zijn dan het kind om verticaal centreren zichtbaar te maken.
De korte versie
Nodig
CSS op de parent
Tailwind
Beide richtingen
display: grid; place-items: center
grid place-items-center
Beide richtingen
display: flex; justify-content: center; align-items: center
flex items-center justify-center
Horizontaal blok
(op het kind) margin-inline: auto + een breedte
mx-auto w-…
Over een afbeelding
position: relative, kind inset: 0 + margin: auto
relative / absolute inset-0 m-auto
Kies een methode en een as en de demobox beweegt, de CSS voor parent en kind wordt uitgeschreven en een opmerking zegt waar die methode faalt. Zeven technieken komen aan bod, ook de oude die u nog in bestaande code tegenkomt, gevolgd door een beslistabel om er een te kiezen.
Kies horizontaal, verticaal of beide.
Klik door de methoden. Methoden die de gekozen as niet aankunnen, zeggen dat eerlijk in plaats van te doen alsof.
Lees de opmerking over waar de methode faalt en kopieer dan de CSS of de Tailwind-classes.
Bekijk de beslistabel hieronder als u niet zeker weet welke u moet gebruiken.
Wil iets niet verticaal centreren, geef de parent dan eerst een outline. Negen van de tien keer is hij maar zo hoog als zijn inhoud.
Kies voor nieuwe code grid of flex. Die houden het kind in de flow, zodat de parent er nog steeds omheen groeit.
Om een tekstblok te centreren en de regels links uitgelijnd te houden, centreert u het blok met margin-inline: auto en laat u text-align met rust.
margin: auto op een flex-kind is een handige truc: het neemt aan elke kant de vrije ruimte in en centreert alleen dat ene item.
Veelgestelde vragen
Waarom centreert mijn div niet verticaal?
Meestal omdat de parent geen extra hoogte heeft. Een blok is maar zo hoog als zijn inhoud, dus er is geen ruimte om binnen te centreren. Geef de parent een height, een min-height (bijvoorbeeld 100dvh voor een volledig scherm) of laat hem uitrekken binnen een hogere flex- of grid-layout.
Wat is de kortste manier om een div te centreren?
display: grid; place-items: center; op de parent. Het centreert het kind in beide richtingen, werkt voor elk formaat kind en heeft geen width of height op het kind nodig.
Hoe centreer ik een div op de hele pagina?
Maak body of een wrapper minstens zo hoog als de viewport: min-height: 100dvh; display: grid; place-items: center;. Voor een modal die boven de pagina zweeft, gebruikt u position: fixed; inset: 0; margin: auto; met een vaste breedte en hoogte, of het native dialog-element, dat zichzelf centreert.
Werkt margin: 0 auto nog?
Ja, voor horizontaal centreren van een blok met een breedte die smaller is dan de parent. margin-inline: auto is de moderne logische vorm en laat de marges boven en onder ongemoeid.
Hoe centreer ik een div in Tailwind?
Zet flex items-center justify-center, of grid place-items-center, op de parent en geef die een hoogte zoals h-screen of min-h-dvh. Voor een horizontaal gecentreerd blok voegt u mx-auto en een width of max-width toe aan het kind.
Twee richtingen, twee verschillende problemen
Horizontaal centreren is makkelijk in block layout omdat de breedte bekend is: de breedte van de parent wordt bepaald door zijn container, dus automatische marges kunnen de overgebleven ruimte verdelen. Hoogte is het omgekeerde, die wordt bepaald door de inhoud, en daarom had verticaal centreren jarenlang trucs nodig.
Flexbox en grid veranderden dat door de parent vrije ruimte op beide assen te laten verdelen. Zodra de parent een bekende hoogte heeft, doen de uitlijningseigenschappen de rest en blijft het kind deel van de normale flow.
Wanneer de oude methoden nog zinvol zijn
Absolute positionering is juist als het gecentreerde element boven andere inhoud moet zweven, zoals een afspeelknop over een videothumbnail of een spinner over een kaart. De versie met inset plus margin auto voorkomt de wazige randen van een halve pixel die een translate kan opleveren.
text-align is nog steeds de snelste manier om een icoon of inline knop binnen een tekstregel te centreren. Centreren met line-height hoort alleen thuis in badges van één regel die u volledig in de hand hebt.
Beslistabel
Welke methode voor welke klus
Methode
Horizontaal
Verticaal
Beide
Let op
Flexbox
Ja
Ja
Ja
Verticaal centreren vereist dat de parent hoger is dan het kind. Met flex-direction: column wisselen de twee eigenschappen van as.
Grid place-items
Ja
Ja
Ja
Meerdere kinderen stapelen in rijen, elk gecentreerd in een eigen rij, waardoor ze verticaal uit elkaar staan in plaats van bij elkaar. Zet ze in één element.
margin: auto
Ja
Nee
Nee
In de normale block flow centreert het alleen horizontaal, en alleen als het kind een breedte heeft die kleiner is dan de parent. Binnen een flex- of grid-parent centreert margin: auto in beide richtingen.
Absolute + transform
Ja
Ja
Ja
Het kind verlaat de flow, dus de parent groeit er niet meer omheen. Verschuivingen van een halve pixel kunnen tekst wazig maken, en de transform maakt van het kind een containing block en een stacking context.
Absolute inset + margin auto
Ja
Ja
Ja
Het kind heeft een expliciete grootte op de gecentreerde as nodig. Zonder die grootte rekt inset: 0 het kind gewoon uit tot het de parent vult. fit-content-breedtes werken ook in huidige browsers.
text-align: center
Ja
Nee
Nee
Verplaatst alleen inline inhoud: tekst, afbeeldingen, inline-block-boxen. Een gewone block-div negeert het, en de tekst in het kind erft de centrering ook.
Nee
Ja
Ja
Gaat stuk zodra de tekst naar een tweede regel loopt, en de hoogte moet twee keer hard worden ingesteld. Prima voor een badge of knop van één regel, verder niets.
Recepten om te kopiëren
Een kaart midden op het scherm
Gebruik op een echte pagina min-height: 100dvh op de wrapper. Het kader hier gebruikt een vaste hoogte zodat het past.
Afspeelknop over een thumbnail
inset: 0 met margin: auto centreert een kind met vaste grootte zonder transform, zodat de randen scherp blijven.
Eén item gecentreerd, de andere aan de randen
Automatische marges op een flex-kind nemen alle vrije ruimte in, zodat het logo midden in de balk staat terwijl menu en winkelwagen aan de zijkanten blijven.
Verticaal centreren vereist dat de parent hoger is dan het kind. Met flex-direction: column wisselen de twee eigenschappen van as.
Meerdere kinderen stapelen in rijen, elk gecentreerd in een eigen rij, waardoor ze verticaal uit elkaar staan in plaats van bij elkaar. Zet ze in één element.
In de normale block flow centreert het alleen horizontaal, en alleen als het kind een breedte heeft die kleiner is dan de parent. Binnen een flex- of grid-parent centreert margin: auto in beide richtingen.
Het kind verlaat de flow, dus de parent groeit er niet meer omheen. Verschuivingen van een halve pixel kunnen tekst wazig maken, en de transform maakt van het kind een containing block en een stacking context.
Het kind heeft een expliciete grootte op de gecentreerde as nodig. Zonder die grootte rekt inset: 0 het kind gewoon uit tot het de parent vult. fit-content-breedtes werken ook in huidige browsers.
Verplaatst alleen inline inhoud: tekst, afbeeldingen, inline-block-boxen. Een gewone block-div negeert het, en de tekst in het kind erft de centrering ook.
Gaat stuk zodra de tekst naar een tweede regel loopt, en de hoogte moet twee keer hard worden ingesteld. Prima voor een badge of knop van één regel, verder niets.
Probeer elke centreermethode
As
Centreren
Methode
Parent (gestippeld) en kind (blauw)
Kindbox
Deze methode kan die as niet aan. De box toont waar hij zonder terechtkomt.