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 dieses CSS auf die innere <div> :

#inner {
  width: 50%;
  margin: 0 auto;
}

Natürlich müssen Sie nicht die width a 50% . Jede Breite, die kleiner ist als der enthaltende <div> wird funktionieren. Die margin: 0 auto ist für die eigentliche Zentrierung zuständig.

Wenn Sie auf Folgendes abzielen Internet Explorer 8 (und später), könnte es besser sein, stattdessen dies zu haben:

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

Dadurch wird das innere Element horizontal zentriert, und es funktioniert, ohne eine bestimmte width .

Hier ein Arbeitsbeispiel:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

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

---

EDIT

Mit flexbox ist es sehr einfach, das Div horizontal und vertikal zentriert zu gestalten.

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

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

Um das div vertikal zentriert auszurichten, verwenden Sie die Eigenschaft align-items: center .

Answer 2

Wenn Sie keine feste Breite für den inneren Bereich festlegen wollen div könnte man etwa so vorgehen:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

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

Das macht die innere div in ein Inline-Element umzuwandeln, das zentriert werden kann mit text-align .

Answer 3

Die besten Ansätze sind mit CSS3.

Das alte Box-Modell (veraltet)

display: box und seine Eigenschaften box-pack , box-align , box-orient , box-direction usw. sind durch Flexbox ersetzt worden. Sie können zwar noch funktionieren, sollten aber nicht mehr in der Produktion verwendet werden.

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

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

Je nach Ihren Bedürfnissen können Sie auch die box-orient, box-flex, box-direction Eigenschaften.

Das moderne Boxmodell mit Flexbox

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Lesen Sie mehr über die Zentrierung der untergeordneten Elemente

• Link 2

• Link 3

• Link 4

Und dies erklärt, warum das Boxmodell der beste Ansatz ist :

• Warum wird das W3C-Box-Modell als besser angesehen?

Answer 4

#centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

<div id="outer" style="width:200px">
  <div id="centered">Foo foo</div>
</div>

Stellen Sie sicher, dass das übergeordnete Element positioniert d.h. relativ, fest, absolut oder klebrig.

Wenn Sie die Breite Ihres Divs nicht kennen, können Sie transform:translateX(-50%); anstelle der negativen Marge.

Mit CSS calc() kann der Code noch einfacher werden:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Das Prinzip ist immer noch dasselbe: den Gegenstand in die Mitte legen und die Breite ausgleichen.

Answer 5

Ich habe erstellt dieses Beispiel um zu zeigen, wie man vertikal et Horizontal align .

Der Code lautet im Wesentlichen wie folgt:

#outer {
 position: relative;
}

und...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

Und es bleibt in der center auch wenn Sie Größe ändern Ihr Bildschirm.