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 etwa so vorgehen

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Dadurch wird auch die #inner vertikal. Wenn Sie das nicht wollen, entfernen Sie die display et vertical-align Eigenschaften;

Answer 2

Hier ist, was Sie wollen, auf dem kürzesten Weg.

JSFIDDLE

#outer {
  margin - top: 100 px;
  height: 500 px; /* you can set whatever you want */
  border: 1 px solid# ccc;
}

#inner {
  border: 1 px solid# f00;
  position: relative;
  top: 50 % ;
  transform: translateY(-50 % );
}

Answer 3

Sie können verwenden display: flex für das äußere Div und zur horizontalen Zentrierung müssen Sie Folgendes hinzufügen justify-content: center

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

oder Sie können besuchen w3schools - CSS flex Eigenschaft für weitere Ideen.

Answer 4

Sie können einfach Folgendes verwenden Flexbox wie diese:

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

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

Autoprefixer für alle unterstützten Browser anwenden:

#outer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

Oder aber

Utilice umwandeln :

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

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

Mit Autoprefixer:

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

Answer 5

Es gab eine Möglichkeit, die ich gefunden habe:

Alle sagen, dass man sie benutzen soll:

margin: auto 0;

Aber es gibt noch eine andere Möglichkeit. Legen Sie diese Eigenschaft für das übergeordnete Div fest. Es funktioniert jederzeit perfekt:

text-align: center;

Und siehe da, Kind go center.

Und schließlich CSS für Sie:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}