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

Das beste, das ich bei meinen verschiedenen Projekten verwendet habe, ist

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Fiddle-Link

Answer 2

Dies wird sicherlich Ihr Zentrum #inner sowohl in horizontaler als auch in vertikaler Richtung. Dies ist auch in allen Browsern kompatibel. Ich habe nur zusätzliches Styling hinzugefügt, um zu zeigen, wie es zentriert ist.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 

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

Aber wenn Sie nur eine horizontale Ausrichtung wünschen, kann dies natürlich helfen.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 

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

Answer 3

Sie können dies tun, indem Sie Flexbox was heutzutage eine gute Technik ist.

Für die Verwendung von Flexbox sollten Sie display: flex; et align-items: center; an Ihre Eltern oder #outer div-Element. Der Code sollte wie folgt aussehen:

#outer {
  display: flex;
  align-items: center;
}

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

Dies sollte Ihr Kind oder #inner div horizontal. Aber Sie können eigentlich keine Änderungen sehen. Denn unser #outer div hat keine Höhe, oder anders gesagt, seine Höhe ist auf auto eingestellt, so dass es die gleiche Höhe wie alle seine untergeordneten Elemente hat. Nach ein wenig visuellem Styling sollte der Ergebniscode also wie folgt aussehen:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}

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

Sie können sehen #inner div ist jetzt zentriert. Flexbox ist die neue Methode zur Positionierung von Elementen in horizontalen oder vertikalen Stapeln mit CSS und ist zu 96% mit den Browsern weltweit kompatibel. Es steht Ihnen also frei, es zu verwenden, und wenn Sie mehr über Flexbox erfahren möchten, besuchen Sie CSS-Tricks Artikel. Das ist der beste Ort, um mit Flexbox meiner Meinung nach zu lernen.

Answer 4

Das hat bei mir funktioniert:

#inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

In diesem Code bestimmen Sie die Breite des Elements.

Answer 5

.outer
{
  background-color: rgb(230,230,255);
  width: 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}

<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>