Jakie są sposoby na poziome wyśrodkowanie elementów na stronie internetowej?

Istnieje kilka powszechnych metod:

• text-align: Dla elementów w linii (inline lub inline-block) wewnątrz elementu nadrzędnego. Element nadrzędny musi mieć text-align: center.

• margin: auto: Dla elementów blokowych (block). Element musi mieć określoną szerokość (width). Przeglądarka automatycznie rozdziela dostępne miejsce po lewej i prawej stronie.

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

• Flexbox: Elastyczny system układu. Dotyczy elementu nadrzędnego.

  .container {
    display: flex;
    justify-content: center; /* Wyrównuje elementy wzdłuż głównej osi (poziomo) */
  }
  

• Grid: Dwuwymiarowy system układu. Dotyczy elementu nadrzędnego.

  .container {
    display: grid;
    justify-items: center; /* Wyrównuje zawartość komórek poziomo */
  }
  

• Position: absolute i transform: Dla elementów absolutnie pozycjonowanych z znaną szerokością.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Przesuwa element o połowę jego szerokości w lewo */
  }
  

• Display: table i margin: auto: Rzadko używane, ale możliwe.

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