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

Diese Methode funktioniert ebenfalls sehr gut:

div.container {
  display: flex;
  justify-content: center; /* For horizontal alignment */
  align-items: center;     /* For vertical alignment   */
}

Für die innere <div> ist die einzige Bedingung, dass seine height et width darf nicht größer sein als die seines Behälters.

Answer 2

Flexbox

display: flex verhält sich wie ein Blockelement und ordnet seinen Inhalt nach dem Flexbox-Modell an. Es funktioniert mit justify-content: center .

Bitte beachten: Flexbox ist mit allen Browsern außer dem Internet Explorer kompatibel. Siehe Anzeige: Flex funktioniert nicht im Internet Explorer für eine vollständige und aktuelle Liste der Browserkompatibilität.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

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

---

Textausrichtung: zentriert

Die Anwendung text-align: center wird der Inline-Inhalt innerhalb des Zeilenrahmens zentriert. Da das innere div jedoch standardmäßig width: 100% müssen Sie eine bestimmte Breite festlegen oder eine der folgenden Möglichkeiten nutzen:

• display: block
• display: inline

• display: inline-block

  inner {

  display: inline-block; }

  outer {

  text-align: center; }

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

---

Marge: 0 auto

使用方法 margin: 0 auto ist eine weitere Option, die für die Kompatibilität mit älteren Browsern besser geeignet ist. Es funktioniert zusammen mit display: table .

#inner {
  display: table;
  margin: 0 auto;
}

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

---

Transformieren

transform: translate können Sie den Koordinatenraum des visuellen CSS-Formatierungsmodells ändern. Damit können Elemente verschoben, gedreht, skaliert und verzerrt werden. Für die horizontale Zentrierung benötigen Sie position: absolute et left: 50% .

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

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

---

<center> (Veraltet)

Der Tag <center> ist die HTML-Alternative zu text-align: center . Sie funktioniert in älteren und den meisten neuen Browsern, wird aber nicht als gute Praxis angesehen, da diese Funktion veraltet und wurde aus den Webstandards entfernt.

#inner {
  display: inline-block;
}

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

Answer 3

Der einfachste Weg:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 4

Flex deckt mehr als 97 % der Browser ab und könnte der beste Weg sein, um diese Art von Problemen mit wenigen Zeilen zu lösen:

#outer {
  display: flex;
  justify-content: center;
}

Answer 5

Wenn die Breite des Inhalts nicht bekannt ist, können Sie die folgende Methode verwenden . Nehmen wir an, wir haben diese beiden Elemente:

• .outer -- volle Breite
• .inner -- keine Breite festgelegt (aber eine maximale Breite könnte angegeben werden)

Angenommen, die berechnete Breite der Elemente beträgt 1000 Pixel bzw. 300 Pixel. Gehen Sie wie folgt vor:

1. Wickeln .inner innerhalb .center-helper
2. Machen Sie .center-helper ein Inline-Block; er erhält die gleiche Größe wie .inner so dass es 300 Pixel breit ist.
3. Schieben Sie .center-helper 50 % rechts im Verhältnis zum übergeordneten Element; dies platziert das linke Element auf 500 Pixel im Verhältnis zum äußeren Element.
4. Schieben Sie .inner 50% links relativ zu seinem Elternteil; dies platziert seine linke Seite auf -150 Pixel in Bezug auf den mittleren Helfer, was bedeutet, dass seine linke Seite auf 500 - 150 = 350 Pixel in Bezug auf die äußere Seite liegt.
5. Überlauf einschalten .outer auf ausgeblendet setzen, um eine horizontale Bildlaufleiste zu verhindern.

Demo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>