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

CSS 3's box-align Eigenschaft

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Answer 2

In der Regel verwende ich dazu die absolute Position:

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

Das äußere Div braucht keine zusätzlichen Eigenschaften, damit dies funktioniert.

Answer 3

Ich musste kürzlich ein "verstecktes" div (d.h., display:none; ), die ein Tabellenformular enthielt, das auf der Seite zentriert werden musste. Ich schrieb den folgenden jQuery-Code, um das ausgeblendete Div anzuzeigen und dann den CSS-Inhalt auf die automatisch generierte Breite der Tabelle zu aktualisieren und den Rand zu ändern, um sie zu zentrieren. (Das Umschalten der Anzeige wird durch Klicken auf einen Link ausgelöst, aber dieser Code war für die Anzeige nicht erforderlich).

HINWEIS: Ich teile diesen Code, weil Google mich zu dieser Stack Overflow-Lösung gebracht hat und alles funktioniert hätte, außer dass ausgeblendete Elemente keine Breite haben und nicht in der Größe verändert/zentriert werden können, bis sie angezeigt werden.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Answer 4

Für Firefox und Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Für Internet Explorer, Firefox und Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Le site text-align: ist bei modernen Browsern optional, im Internet Explorer Quirks Mode ist sie jedoch für die Unterstützung älterer Browser erforderlich.

Answer 5

Verwendung:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>