Care sunt modalitățile de a centra elementele orizontal pe o pagină web?

Există mai multe metode comune:

• text-align: Pentru elemente inline (inline sau inline-block) din interiorul blocului părinte. Părintele trebuie să aibă text-align: center.

• margin: auto: Pentru elemente de tip bloc (block). Elementul trebuie să aibă o lățime definită (width). Browserul distribuie automat spațiul disponibil pe stânga și dreapta.

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

• Flexbox: Sistem flexibil de aranjare. Se aplică containerului părinte.

  .container {
    display: flex;
    justify-content: center; /* Aliniază elementele pe axa principală (orizontal) */
  }
  

• Grid: Sistem bidimensional de aranjare. Se aplică containerului părinte.

  .container {
    display: grid;
    justify-items: center; /* Aliniază conținutul celulelor pe orizontală */
  }
  

• Position: absolute și transform: Pentru elemente poziționate absolut cu o lățime cunoscută.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Mută elementul cu jumătate din lățimea sa spre stânga */
  }
  

• Display: table și margin: auto: Rar folosit, dar posibil.

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