Millised on viis horisontaalselt elemente veebilehel keskendamiseks?

On olemas mitu levinud meetodit:

• text-align: Inline (inline või inline-block) elementidele vanembloki sees. Vanem peab olema text-align: center.

• margin: auto: Blokielemendile (block). Element peab omama määratud laius (width). Brauser jaotab automaatselt saadaval oleva ruumi vasakul ja paremal.

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

• Flexbox: Paindlik paigutussüsteem. Rakendub vanemkonteinerile.

  .container {
    display: flex;
    justify-content: center; /* Joondab elemendid peamise telje (horisontaalselt) */
  }
  

• Grid: Kahe mõõtmega paigutussüsteem. Rakendub vanemkonteinerile.

  .container {
    display: grid;
    justify-items: center; /* Joondab lahtrite sisu horisontaalselt */
  }
  

• Position: absolute ja transform: Absoluutselt positsioneeritud elementidele, millel on teadaolev laius.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Liigutab elementi poole oma laiuse võrra vasakule */
  }
  

• Display: table ja margin: auto: Harva kasutatav, kuid võimalik.

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