Welche Möglichkeiten gibt es, Elemente horizontal auf einer Webseite zu zentrieren?

Es gibt mehrere gängige Methoden:

• text-align: Für Inline-Elemente (inline oder inline-block) innerhalb des Elternelements. Das Elternelement sollte text-align: center haben.

• margin: auto: Für Block-Elemente (block). Das Element sollte eine definierte Breite (width) haben. Der Browser verteilt den verfügbaren Raum automatisch links und rechts.

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

• Flexbox: Flexibles Layout-System. Wird auf den Elternelement-Container angewendet.

  .container {
    display: flex;
    justify-content: center; /* Zentriert die Elemente entlang der Hauptachse (horizontal) */
  }
  

• Grid: Zweidimensionales Layout-System. Wird auf den Elternelement-Container angewendet.

  .container {
    display: grid;
    justify-items: center; /* Zentriert den Inhalt der Zellen horizontal */
  }
  

• Position: absolute und transform: Für absolut positionierte Elemente mit bekannter Breite.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Verschiebt das Element um die Hälfte seiner Breite nach links */
  }
  

• Display: table und margin: auto: Wird selten verwendet, ist aber möglich.

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