Quelles sont les méthodes pour centrer horizontalement des éléments sur une page web?

Il existe plusieurs méthodes courantes :

• text-align : Pour les éléments en ligne (inline ou inline-block) à l'intérieur du bloc parent. Le parent doit avoir text-align: center.

• margin: auto : Pour les éléments de type bloc (block). L'élément doit avoir une largeur définie (width). Le navigateur répartit automatiquement l'espace disponible à gauche et à droite.

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

• Flexbox : Système de mise en page flexible. Appliqué au conteneur parent.

  .container {
    display: flex;
    justify-content: center; /* Aligne les éléments sur l'axe principal (horizontal) */
  }
  

• Grid : Système de mise en page bidimensionnel. Appliqué au conteneur parent.

  .container {
    display: grid;
    justify-items: center; /* Aligne le contenu des cellules horizontalement */
  }
  

• Position : absolute et transform : Pour les éléments positionnés absolument avec une largeur connue.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Décale l'élément de la moitié de sa largeur vers la gauche */
  }
  

• Display: table et margin: auto : Utilisé rarement, mais possible.

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