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

Eine andere Lösung, ohne eine Breite für eines der Elemente festlegen zu müssen, ist die Verwendung der CSS 3 transform Attribut.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

Der Trick ist, dass translateX(-50%) setzt die #inner Element 50 Prozent nach links von seiner eigenen Breite. Denselben Trick können Sie für die vertikale Ausrichtung anwenden.

Hier ist ein Fiddle mit horizontaler und vertikaler Ausrichtung.

Weitere Informationen finden Sie unter Mozilla-Entwickler-Netzwerk .

Answer 2

Chris Coyier, der einen ausgezeichneter Posten über "Zentrierung im Unbekannten" in seinem Blog. Es ist eine Zusammenstellung verschiedener Lösungen. Ich habe eine gepostet, die in dieser Frage nicht vorkommt. Sie bietet mehr Browserunterstützung als die Flexbox Lösung, und Sie verwenden keine display: table; was andere Dinge kaputt machen könnte.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 3

Ich habe kürzlich einen Ansatz gefunden:

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

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

Beide Elemente müssen die gleiche Breite haben, um korrekt zu funktionieren.

Answer 4

Zum Beispiel, siehe ce lien und den folgenden Ausschnitt:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Wenn Sie viele Kinder unter einem Elternteil haben, dann muss Ihr CSS-Inhalt wie folgt aussehen Beispiel auf Geige .

Der HTML-Inhalt sieht folgendermaßen aus:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Dann sehen Sie dies Beispiel auf Geige .

Answer 5

Zentrierung nur horizontal

Meiner Erfahrung nach ist es am besten, einen Rahmen horizontal zu zentrieren, indem man die folgenden Eigenschaften anwendet:

Der Container:

• haben sollen text-align: center;

Die Inhaltsbox:

• haben sollen display: inline-block;

Demo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Siehe auch diese Fiedel !

---

Horizontale und vertikale Zentrierung

Meiner Erfahrung nach ist es am besten, eine Box zu zentrieren 両方共 in vertikaler und horizontaler Richtung ist die Verwendung eines zusätzlichen Containers und die Anwendung der folgenden Eigenschaften:

Der Außenbehälter:

• haben sollen display: table;

Der innere Behälter:

• haben sollen display: table-cell;
• haben sollen vertical-align: middle;
• haben sollen text-align: center;

Die Inhaltsbox:

• haben sollen display: inline-block;

Demo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Siehe auch diese Fiedel !