Hoe centreer je een blok zowel horizontaal als verticaal?

Flexbox:

• Met de ouder:

  .parent {
    display: flex; // Activeer flex-container
    justify-content: center; // Horizontaal centreren
    align-items: center; // Verticaal centreren
  }
  

Grid:

• Met de ouder:

  .parent {
    display: grid; // Activeer grid-container
    place-items: center; /* Centraal zowel horizontaal als verticaal.
                            Gelijk aan:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute en Transform:

.parent {
  position: relative; // De ouder moet gepositioneerd zijn
}

.child {
  position: absolute; // Absolute positionering
  top: 50%; // Verplaats de bovenrand naar 50% van de ouder
  left: 50%; // Verplaats de linkerrand naar 50% van de ouder
  transform: translate(-50%, -50%); /* Verplaats het element met de helft
                                       van zijn eigen breedte en hoogte
                                       voor exacte centrering */
}

Margin: auto (alleen voor horizontale centrering in inline-block en block):

.element {
  display: block; // Of inline-block
  width: bepaalde-breedte; // Breedte moet worden ingesteld
  margin: 0 auto; // Automatische marges links en rechts
}