Koji su načini horizontalnog centriranja elemenata na veb stranici?

Postoji nekoliko uobičajenih načina:

• text-align: Za inline (inline ili inline-block) elemente unutar roditeljskog bloka. Roditelj mora imati text-align: center.

• margin: auto: Za blok (block) elemente. Element mora imati zadatu širinu (width). Pregledač automatski raspoređuje dostupni prostor sa leve i desne strane.

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

• Flexbox: Fleksibilni sistem rasporeda. Primjenjuje se na roditeljski kontejner.

  .container {
    display: flex;
    justify-content: center; /* Poravnava elemente duž glavne ose (horizontalno) */
  }
  

• Grid: Dvodimenzionalni sistem rasporeda. Primjenjuje se na roditeljski kontejner.

  .container {
    display: grid;
    justify-items: center; /* Poravnava sadržaj ćelija horizontalno */
  }
  

• Position: absolute i transform: Za apsolutno pozicionirane elemente sa poznatom širinom.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Pomera element za polovinu njegove širine ulevo */
  }
  

• Display: table i margin: auto: Retko se koristi, ali je moguće.

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