Wat zijn de manieren om elementen horizontaal te centreren op een webpagina?

Er zijn verschillende veelvoorkomende methoden:

• text-align: Voor inline (inline of inline-block) elementen binnen het ouderblok. De ouder moet text-align: center hebben.

• margin: auto: Voor blok (block) elementen. Het element moet een vaste breedte (width) hebben. De browser verdeelt automatisch de beschikbare ruimte links en rechts.

  .element {
    width: 200px;
    margin: 0 auto;
  }
  

• Flexbox: Flexibel lay-outsysteem. Toegepast op de oudercontainer.

  .container {
    display: flex;
    justify-content: center; /* Centreert de elementen op de hoofdas (horizontaal) */
  }
  

• Grid: Tweedimensionaal lay-outsysteem. Toegepast op de oudercontainer.

  .container {
    display: grid;
    justify-items: center; /* Centreert de inhoud van de cellen horizontaal */
  }
  

• Position: absolute en transform: Voor absoluut gepositioneerde elementen met een bekende breedte.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Verschuift het element de helft van zijn breedte naar links */
  }
  

• Display: table en margin: auto: Wordt zelden gebruikt, maar is mogelijk.

  .element {
    display: table;
    margin: 0 auto;
  }