Wie kann ich ein absolut positioniertes Element in einem div zentrieren?

Question

Ich muss eine div (mit position:absolute; ) Element in der Mitte meines Fensters. Aber ich habe Probleme dabei, weil das Breite ist unbekannt .

Ich habe das ausprobiert. Aber es muss angepasst werden, da die Breite reaktionsfähig ist.

.center {
  left: 50%;
  bottom: 5px;
}

Wie kann ich das tun?

Answer 1

Ich wollte nur hinzufügen, wenn jemand will es mit einem einzigen div-Tag zu tun, dann ist hier der Weg aus:

Unter width como 900px .

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

In diesem Fall sollte man die width im Vorfeld.

Answer 2

Absolutes Zentrum

HTML :

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS :

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Getestet wurde es in Google Chrome, Firefox und Internet Explorer 8 .

Answer 3

Dies funktioniert sowohl vertikal als auch horizontal:

#myContent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Und wenn Sie ein Element in der Mitte des übergeordneten Elements platzieren wollen, setzen Sie die Position des übergeordneten Elements relativ:

#parentElement{
    position: relative
}

• Für die vertikale mittige Ausrichtung stellen Sie die Höhe auf Ihr Element ein. Dank an Raul .

• Wenn Sie ein Element in die Mitte des übergeordneten Elements setzen wollen, setzen Sie die Position des übergeordneten Elements auf relativ

Answer 4

Wenn Sie auch horizontal und vertikal zentrieren müssen:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Answer 5

Auf der Suche nach einer Lösung bin ich auf die vorherigen Antworten gestoßen und konnte den Inhalt zentriert mit Die Antwort von Matthias Weiler sondern mit text-align :

#content{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

Es funktioniert mit Google Chrome und Firefox.