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

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top: -20px; /* Half of your height */
}

Answer 2

Je nach den Umständen könnte die einfachste Lösung lauten:

margin: 0 auto; float: none;

Answer 3

Ja, dies ist ein kurzer und sauberer Code für die horizontale Ausrichtung.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

Answer 4

Es ist so einfach.

Entscheiden Sie einfach, welche Breite Sie dem inneren Div geben möchten, und verwenden Sie das folgende CSS.

CSS

.inner{
  width: 500px; /* Assumed width */
  margin: 0 auto;
}

Answer 5

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>