Wie man ein Element horizontal zentriert

Question

Wie kann ich eine horizontale Zentrierung einer <div> in einem anderen <div> CSS verwenden?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Answer 1

Sie können ein weiteres Div hinzufügen, das die gleiche Größe wie #inner hat, und es um -50% (die Hälfte der Breite von #inner) nach links und #inner um 50% verschieben.

#inner {
    position: absolute;
    left: 50%;
}

#inner > div {
    position: relative;
    left: -50%;
}

<div id="outer">
  <div id="inner"><div>Foo foo</div></div>
</div>

Answer 2

In den vorangegangenen Beispielen verwendeten sie margin: 0 auto , display:table und andere Antworten verwenden "mit transformieren und übersetzen".

Und wie wäre es mit einem Anhänger? Jeder weiß, es gibt eine <center> Tag, der von HTML5 einfach nicht unterstützt wird. Aber es funktioniert in HTML5. Zum Beispiel, in meinen alten Projekten.

Und es funktioniert, aber jetzt nicht nur MDN-Webdokumente aber andere Websites raten davon ab, sie weiter zu verwenden. Hier in _Kann ich die_ können Sie Hinweise aus MDN Web Docs einsehen. Aber egal, es gibt einen solchen Weg. Das ist nur zu wissen. Immer über etwas informiert zu sein, ist so nützlich.

Answer 3

Versuchen Sie dies:

<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Example</div></div>

Answer 4

In meinem Fall brauchte ich zu zentrieren (auf dem Bildschirm) ein Dropdown-Menü (mit Flexbox für seine Elemente) unter einer Schaltfläche, die verschiedene Positionen vertikal haben könnte. Keiner der Vorschläge funktionierte, bis ich die Position von absolut auf fest, wie diese geändert:

#outer {
      margin: auto;
      left: 0;
      right: 0;
      position: fixed;
}
#inner {
      text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Der obige Code sorgt dafür, dass die Dropdown-Liste bei Geräten aller Größen immer in der Mitte des Bildschirms angezeigt wird, unabhängig davon, wo die Dropdown-Schaltfläche vertikal angeordnet ist.

Answer 5

Es gibt mehrere Möglichkeiten, dies zu erreichen: mit "flex", "positioning", "margin" und anderen. Angenommen, #outer et #inner divs in der Frage angegeben:

Ich würde empfehlen, "flex" zu verwenden.

#outer {
   display: flex;
   justify-content: center;
   align-items: center;  /* if you also need vertical center */
}

Horizontales Ausrichten durch Positionierung

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  translate: transformX(-50%)
}

Horizontale und vertikale Ausrichtung durch Positionierung

#outer {
  position: relative;
}
#inner {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: transform(-50%, -50%)
}

Horizontal ausrichten mit Rand

#inner {
 width: fit-content;
 margin: 0 auto;
}