Een div of tekst centreren in CSS: zes manieren en wanneer je welke kiest

Hoe centreer je een div horizontaal en verticaal?

Zet de ouder in flexbox en laat hem zijn kinderen in het midden zetten: display: flex, justify-content: center en align-items: center. Dat is de kortste weg naar het midden in de breedte én in de hoogte, en het werkt met elke inhoud: één knop, een kaart of een groepje foodtrucks. De regels komen op de ouder, niet op de div die je wil verplaatsen: ze op het kind zetten is de eerste klassieke vergissing.

.ouder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

Let op die min-height. Een blok is standaard zo hoog als zijn inhoud, en dan valt er in de hoogte niets te centreren: het kind raakt de boven- en de onderkant al. Geef de ouder een height of een min-height, en pas dan zie je het kind naar het midden zakken. Een vergeten hoogte is de bekendste reden waarom "verticaal centreren niet werkt".

Probeer het meteen. Op het hoge plein van foodtruckfestival Wielen & Smullen, de klant van onze module over flexbox, staan drie trucks tegen de linkerkant, uitgerekt over de hele hoogte. Het plein is al 200 pixels hoog, dus ruimte is er genoeg. Na je antwoord probeert de controle je CSS ook op een plein met een truck meer en langere namen, dus met een vaste marge kom je er niet.

De pagina die je net aanpaste, draaide in je eigen browser. Lurndo controleert ze op wat de browser ervan maakt: waar elke truck terechtkomt, ook op dat verborgen plein met vier trucks. Je hoeft onze oplossing dus niet letterlijk over te nemen. Wil je de twee assen eerst rustig zien, met een inspector die ze voor je tekent, begin dan bij display: flex en daarna justify-content.

Hoe centreer je een div met grid?

Met grid kan het nog korter: display: grid en place-items: center op de ouder. place-items is de afkorting van align-items en justify-items samen, en zet elk kind in het midden van zijn eigen cel. Voor één kind, zoals een melding in een leeg vlak of een logo op een tegel, is dat de kortste regel die er bestaat. place-items werkt sinds januari 2020 in alle grote browsers (MDN).

.ouder {
  display: grid;
  place-items: center;
  min-height: 300px;
}

Met meer dan één kind wordt het anders. Een grid zonder kolommen zet zijn kinderen onder elkaar, elk in een eigen rij, en die rijen verdelen de hoogte van de ouder. Elk kind staat dan in het midden van zijn rij, niet samen met de andere in het midden van het vlak. Wil je het groepje bij elkaar, gebruik dan place-content: center of flexbox. In uitlijnen in een cel zie je het verschil op een camping vol tentjes.

Op het web is flexbox de grote favoriet. Volgens Chrome Platform Status gebruikte 84,4% van de geladen pagina's in Chrome op 3 november 2026 flexbox (Chrome Platform Status), tegen 46,5% voor grid (Chrome Platform Status). Grid groeit wel snel: de Web Almanac vond het in 2019 op 2% van de mobiele pagina's en in 2022 al op 12% (Web Almanac).

Hoe centreer je een div alleen horizontaal met margin auto?

Voor een blok dat alleen in de breedte in het midden moet, zoals de hoofdinhoud van een pagina, heb je geen flexbox nodig. Geef het een width of een max-width en zet de marge links en rechts op auto: de browser verdeelt de ruimte die overblijft eerlijk over beide kanten. margin: 0 auto is de klassieke schrijfwijze. margin-inline: auto is de moderne, en werkt sinds april 2021 in alle grote browsers (MDN).

main {
  max-width: 48rem;
  margin-inline: auto;
}

Werkt margin: 0 auto niet? Dan heeft het blok bijna altijd geen breedte. Zonder width of max-width is een blok zo breed als zijn ouder, en valt er links en rechts niets te verdelen: auto wordt nul. In de hoogte doet auto in een gewoon blok niets, en daarom centreert deze manier alleen horizontaal. In de les centreren met margin auto zie je in het boxmodel hoe de marges meeschuiven.

Hoe centreer je verticaal zonder flexbox of grid?

Met align-content: center, de nieuwste van de zes manieren. Het werkt nu ook op een gewoon blok, met display: block, en de inhoud zakt dan naar het midden van de hoogte. Chrome en Edge 123, Safari 17.4 en Firefox 125 voerden het in het voorjaar van 2024 in, en sinds 16 oktober 2026 is het Baseline widely available (webstatus.dev). Dat label krijgt een functie 30 maanden nadat de laatste grote browser volgde (web.dev).

.melding {
  min-height: 200px;
  align-content: center;
  text-align: center;
}

Het voordeel: je verandert niets aan de HTML, en de kinderen blijven gewone blokken in plaats van flex-items die krimpen of uitrekken. Toen het in april 2024 in alle drie de browserengines zat, schreef Rachel Andrew op web.dev dat verticaal centreren, ooit zo goed als onmogelijk, met flexbox en grid al makkelijker was geworden, en dat het nu ook in gewone blokken kan (web.dev).

Toch kom je het nog weinig tegen. In de uitleg over centreren die we voor dit artikel lazen, in het Nederlands en in het Engels, zegt nog niemand dat het klaar is voor gebruik. Ook het centreerrecept van MDN toont alleen flexbox en grid (MDN). Wie het nu leert, loopt dus een beetje voor.

Hoe centreer je met position: absolute?

Soms moet iets bovenop de rest liggen: een venster over de pagina, een afspeelknop op een foto. Dan haal je het uit de stroom met position: absolute, en zet je de ouder op position: relative, zodat het kind zich naar die ouder richt. Met inset: 0 en margin: auto komt het in het midden, op voorwaarde dat het kind een breedte en een hoogte heeft. inset werkt sinds april 2021 in alle grote browsers (MDN).

.foto {
  position: relative;
}
.afspeelknop {
  position: absolute;
  inset: 0;
  width: 64px;
  height: 64px;
  margin: auto;
}

Ken je de maten niet, gebruik dan de oudere truc. top: 50% en left: 50% zetten de linkerbovenhoek van het kind in het midden, en transform: translate(-50%, -50%) schuift het terug met de helft van zijn eigen breedte en hoogte. Die transform is al sinds maart 2018 Baseline widely available (webstatus.dev). Hoe een kind zich naar zijn ouder richt, oefen je in relative en absolute.

.venster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Een absoluut element telt niet meer mee voor de hoogte van zijn ouder. Die groeit dus niet als het venster groter wordt, en lange tekst kan eruit lopen of over de rest van de pagina schuiven. Daarom is dit de manier voor wat zweeft, en niet voor de gewone inhoud van een pagina.

Waarom centreert text-align: center mijn div niet?

Omdat text-align het blok zelf niet verplaatst, alleen wat erin staat. MDN zegt het precies: de eigenschap regelt de horizontale uitlijning van "the inline-level content inside a block element" (MDN). Tekst, links, een <img> of een knop met display: inline-block schuiven naar het midden. De div zelf blijft zo breed als zijn ouder en staat waar hij stond.

Voor tekst is text-align: center dus wel de juiste keuze: een titel, een knop onder een formulier, een rij pictogrammen. Zet het op het blok rond de tekst. Wil je een afbeelding centreren, dan heb je twee wegen: laat ze inline staan en zet text-align: center op de ouder, of maak er een blok van met display: block en margin-inline: auto.

.kop {
  text-align: center;
}
.logo {
  display: block;
  margin-inline: auto;
}

Welke manier kies je wanneer?

Er is geen beste manier, wel een beste manier per geval. De vraag is telkens dezelfde: wil je centreren in één richting of in twee, gaat het om één kind of om een groepje, en mag het element in de gewone stroom van de pagina blijven? Deze tabel zet de zes manieren naast elkaar.

Twijfel je, begin dan met flexbox: het werkt voor één kind en voor tien, en de kinderen blijven in de stroom. Grid is handig zodra de ouder toch al een grid is. Hoe je die twee leert lezen, met puzzels die steeds iets moeilijker worden, lees je op flexbox en grid oefenen. Alle eigenschappen staan met een voorbeeld op het HTML- en CSS-spiekbriefje.

Waarom werkt mijn centreren niet?

Bijna altijd door een van deze vijf fouten. Ze zien er onschuldig uit, en CSS geeft nooit een foutmelding: er gebeurt gewoon niets, of het werkt op jouw scherm en niet op dat van een ander. Loop ze één voor één af voor je aan je hele stylesheet begint te twijfelen.

1. De ouder heeft geen hoogte. Een blok is zo hoog als zijn inhoud. Zonder height of min-height op de ouder valt er verticaal niets te centreren, met welke manier ook.
2. `text-align` op het blok. Het verplaatst de tekst in het blok, niet het blok zelf. Voor de div kies je een van de andere manieren.
3. `margin: auto` zonder breedte. Een blok zonder width of max-width vult de hele rij, dus blijft er links en rechts niets over om te verdelen.
4. `absolute` zonder ouder met een positie. Zonder position: relative op de ouder richt het kind zich naar een verdere voorouder met een positie, of naar de pagina zelf. Dan staat het bijvoorbeeld in het midden van het eerste scherm in plaats van in zijn kader.
5. Vaste maten die breken met langere tekst. Een margin-left: 300px of top: 85px klopt voor één schermbreedte en één tekst. Met een langere titel of een item meer staat alles scheef. Laat de browser rekenen, met auto of center.

Je bent niet de enige die erover struikelt. In de State of CSS 2025, een enquête met 5.506 deelnemers, noemden mensen in hun open antwoorden over lastige layout vooral grid (272 keer), maar ook hoogte (94 keer), positioneren (63 keer) en uitlijnen (55 keer) (State of CSS).

Hoe leer je centreren voorgoed?

Centreren onthoud je niet door zes recepten van buiten te leren, wel door te zien wat elke regel doet. Daarom tekent de inspector in onze lessen de assen van flexbox en de lijnen van grid onder de pagina, en controleren we elke oplossing ook op een variant met langere teksten en een item meer. Ga verder met align-items of display: grid, of lees eerst wat het verschil is tussen HTML en CSS. De eerste drie modules zijn gratis.