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

Einige Poster haben die CSS 3-Methode zum Zentrieren mit display:box .

Diese Syntax ist veraltet und sollte nicht mehr verwendet werden. [Siehe auch [dieser Beitrag]](http://css-tricks.com/old-flexbox-and-new-flexbox/) .

Nur der Vollständigkeit halber hier die neueste Art, in CSS 3 zu zentrieren, indem man die Flexibles Box-Layout-Modul .

Wenn Sie also ein einfaches Markup wie:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...und Sie möchten Ihre Elemente innerhalb der Box zentrieren, dann brauchen Sie folgendes auf dem übergeordneten Element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Wenn Sie ältere Browser unterstützen müssen, die eine ältere Syntax für Flexbox verwenden hier ist ein guter Ort zum Suchen.

Answer 2

Wenn Sie keine feste Breite festlegen wollen und den zusätzlichen Rand nicht benötigen, fügen Sie display: inline-block zu Ihrem Element.

Sie können verwenden:

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

Answer 3

Zentrieren eines Divs mit unbekannter Höhe und Breite

Horizontal und vertikal. Es funktioniert mit einigermaßen modernen Browsern (Firefox, Safari/WebKit, Chrome, Internet & Explorer & 10, Opera, usw.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

Basteln Sie weiter daran herum Codepen oder am JSBin .

Answer 4

Stellen Sie die width und setzen margin-left et margin-right a auto . Das ist nur für die Horizontale Allerdings. Wenn Sie beides wollen, machen Sie es einfach auf beide Arten. Haben Sie keine Angst zu experimentieren; es ist nicht so, dass Sie etwas kaputt machen.

Answer 5

Sie kann nicht zentriert werden, wenn Sie ihr keine Breite geben. Andernfalls nimmt es standardmäßig den gesamten horizontalen Platz ein.