Div centreren in CSS: horizontaal, verticaal en beide (Flexbox, Grid)

Een div centreren in CSS vroeg lang om trucjes. Dat is niet meer zo: drie regels Flexbox centreren elk element in zijn container, horizontaal en verticaal. Dit artikel begint met dat korte antwoord, en behandelt daarna elke situatie in detail, van het centreren van een afbeelding tot dat van een knop, met het alternatief Grid en de fouten die je doen denken dat “het niet werkt”.

Het korte antwoord

.conteneur {
  display: flex;
  justify-content: center; /* horizontaal */
  align-items: center;     /* verticaal */
}

<div class="conteneur">
  <div class="boite">Je suis centrée</div>
</div>

Beide eigenschappen zet je op de parent, nooit op het element dat je wilt centreren. En de verticale centrering zie je alleen als de parent een grotere hoogte heeft dan zijn inhoud: dat is het eerste wat je controleert als er niets beweegt.

Horizontaal centreren

Met Flexbox

justify-content verdeelt de kinderen langs de hoofdas, standaard horizontaal. center groepeert ze in het midden.

.conteneur {
  display: flex;
  justify-content: center;
  gap: 1rem; /* ruimte tussen meerdere gecentreerde kinderen */
}

Bij meerdere kinderen blijven ze naast elkaar staan, als groep gecentreerd. Dat is het geval bij de twee paragrafen of de twee afbeeldingen uit het historische voorbeeld van dit artikel.

Met margin auto

Zonder Flexbox centreer je een blok met een bekende breedte met automatische marges:

.boite {
  width: 320px;      /* of max-width: onmisbaar */
  margin: 0 auto;
}

Zonder width of max-width neemt de box de hele beschikbare breedte in en zijn de automatische marges nul. Dit is de methode om te onthouden om een inhoudskolom in een pagina te centreren.

Met text-align

text-align: center centreert de inline-inhoud van een blok: tekst, een link, een inline-afbeelding. Het centreert niet het blok zelf in zijn parent.

.titre {
  text-align: center; /* centreert de tekst binnen .titre */
}

Verticaal centreren

align-items regelt de dwarsas, standaard verticaal. De container moet een hoogte hebben wil de centrering zichtbaar zijn.

.conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}

Om maar één kind verticaal te centreren en de andere bovenaan te laten, zet je align-self op dat kind:

.conteneur .dernier {
  align-self: center;
}

Andere schrijfwijze, vaak korter: margin: auto op het kind van een flex-container centreert het in beide richtingen, door alle vrije ruimte op te slorpen.

.conteneur { display: flex; height: 300px; }
.boite     { margin: auto; }

Centreren over de hele pagina

Een inlogscherm, een foutmelding, een wachtpagina: het element moet in het midden van het venster staan. De container neemt de hele zichtbare hoogte in met min-height: 100vh.

body {
  margin: 0;
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 100% van de hoogte van het venster */
}

min-height in plaats van height: als de inhoud het venster overschrijdt op een klein scherm, wordt de container groter in plaats van af te snijden. Op mobiel is 100dvh (dynamische hoogte, die rekening houdt met de balken van de browser) nog nauwkeuriger en wordt het ondersteund door actuele browsers.

Een afbeelding centreren

Een afbeelding is een inline-element: in een blok centreert text-align: center op de parent haar horizontaal. Om haar in beide richtingen te centreren, of in een kader met een vaste afmeting, is Flexbox eenvoudiger.

/* Alleen horizontaal */
figure {
  text-align: center;
}

/* Horizontaal en verticaal, in een vierkante miniatuur */
.vignette {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.vignette img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Een afbeelding alleen in een kolom centreer je ook als blok: display: block; margin: 0 auto; met een breedte of een maximumbreedte.

Tekst en een knop centreren

Tekst centreer je met text-align: center op zijn blok. Een knop is een inline-block-element: dezelfde eigenschap op zijn parent centreert hem horizontaal.

.actions {
  text-align: center;
}

/* Om meerdere knoppen te centreren met een regelmatige tussenruimte */
.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

Om de tekst binnenin een knop met vaste hoogte te centreren, wordt de knop zelf een flex-container: display: inline-flex; align-items: center; justify-content: center;.

Het alternatief Grid: één enkele regel

CSS Grid centreert een enkel kind in één verklaring:

.conteneur {
  display: grid;
  place-items: center; /* align-items + justify-items */
  min-height: 100vh;
}

Grid en Flexbox geven hier hetzelfde resultaat. Grid is korter voor één element, Flexbox blijft natuurlijker om een rij elementen uit te lijnen. De keuze tussen de twee modellen voor een volledige lay-out wordt uitgewerkt in Grid of Flexbox.

position absolute + transform: het geval van overlappingen

Als het te centreren element uit de flow is gehaald, bijvoorbeeld een tooltip of een modaal venster dat over de pagina heen ligt, positioneer je het op 50% en verschuif je het vervolgens met de helft van zijn eigen afmeting terug:

.parent {
  position: relative;
}

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

De methode werkt zonder de afmeting van het element te kennen, maar ze kan tekst licht wazig maken wanneer de verschuiving op een halve pixel uitkomt. Voor een modaal venster op volledig scherm vermijdt een container position: fixed; inset: 0; display: grid; place-items: center; het probleem.

Waarom “het niet werkt”: de vijf fouten

1. De parent heeft geen hoogte. De verticale centrering is relatief aan de hoogte van de container. Zonder hoogte is er niets om te centreren. Voeg min-height toe.
2. De eigenschappen staan op het kind. justify-content en align-items gaan op de parent. Op het kind werken alleen align-self en margin: auto.
3. margin: 0 auto zonder breedte. Het blok neemt al 100% in: geef het een width of een max-width.
4. text-align: center om een div te centreren. Het centreert de tekst erbinnen, niet de box. Gebruik Flexbox of de automatische marges.
5. height: 100% die niets doet. Een hoogtepercentage geldt alleen als de parent zelf een bepaalde hoogte heeft, tot aan html. 100vh of 100dvh zijn niet afhankelijk van de parent.

Samenvatting

Voor meer dan alleen centreren neemt de complete gids over Flexbox alle eigenschappen van de container en de kinderen door.