Milyen módszerek vannak az elemek vízszintes középre helyezésére egy weboldalon?

Számos általánosan használt módszer létezik:

• text-align: A szülő blokkban lévő inline (inline vagy inline-block) elemekhez. A szülőnek text-align: center-nek kell lennie.

• margin: auto: Blokkszintű (block) elemekhez. A elemnek meg kell adni egy szélességet (width). A böngésző automatikusan elosztja a rendelkezésre álló helyet balra és jobbra.

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

• Flexbox: Rugalmas elrendezési rendszer. A szülő konténerre alkalmazható.

  .container {
    display: flex;
    justify-content: center; /* Az elemek középre igazítása a fő tengely mentén (vízszintesen) */
  }
  

• Grid: Két dimenziós elrendezési rendszer. A szülő konténerre alkalmazható.

  .container {
    display: grid;
    justify-items: center; /* A cellák tartalmának vízszintes középre igazítása */
  }
  

• Position: absolute és transform: Abszolút pozícionált elemekhez, ismert szélességgel.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Az elemet a szélességének felével balra mozgatja */
  }
  

• Display: table és margin: auto: Ritkán használt, de lehetséges.

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