CSS absolute Zentrierung

Kürzlich bin ich auf diese Methode gestoßen, mit der ein Element sowohl horizontal als auch vertikal in der Mitte positioniert wird. Allerdings war ich nicht in der Lage, herauszufinden, was jede Eigenschaft tut. Könnte mir jemand erklären, was die Auswirkung auf die Einstellung ist top:0, bottom:0, left:0, right:0?

(Wäre großartig, wenn Sie es mit einem Laienbegriff erklären oder ein anschauliches Bild bereitstellen könnten.)

Was nützt es auch, die Anzeige auf Tisch zu stellen?

.absolute-center {
  position: absolute;
  display: table;
  height: auto;
  width: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

Sie können das CSS auf Folgendes reduzieren:

.absolute-center {
    position:absolute;
    width: 500px;
    height: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: solid 1px red;
}

<p class="absolute-center">What is this sorcery?</p>

Das absolute Element mit Eigenschaften wie bottom: 0; top: 0; left: 0; right: 0; wird den ganzen Raum ausfüllen.

Also, was ist hier das Geheimnis/die Zauberei?

Sie bestimmen Breite und Höhe des Elements. Selbst wenn er den gesamten Raum ausfüllen möchte, wird er durch Ihre Breite und Höhe begrenzt.

Das Geheimnis ist die margin: auto, warum? Weil das Element den verbleibenden Abstand mit Rand füllt. Da Sie Breite und Höhe definiert haben, wird es diese Größe haben, aber der Rand wird den Rest des Containers/Elternteils auf diese Weise ausfüllen auto funktioniert, beide Seiten gleich groß.

Wegen dem margin:auto Sie müssen Breite und Höhe definieren.

Brechen wir es ein bisschen ab:

Wenn Sie das folgende CSS haben (ich wende es auf Ihr aktuelles Markup an):

.absolute-center {
    position:absolute;
    height: auto;
    margin: auto;
    background: red;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

Sie können sehen, dass die div.absolute-center füllt das gesamte übergeordnete Element (in diesem Fall body), indem Sie einfach alle Eigenschaften festlegen top, bottom, right und left.

Demo: http://jsfiddle.net/0osLv27k/

Wenn wir also hinzufügen width (zusätzlich height) zum vorherigen CSS ist das Element auf diese Größe beschränkt.

Demo:
http://jsfiddle.net/0osLv27k/1/

Und schließlich das Magische margin: auto wodurch das Element zentriert wird.

Demo: http://jsfiddle.net/0osLv27k/2/

Sie müssen nur die oberen und linken Positionen hinzufügen und die Transformation hinzufügen. Wenn Sie keine feste Breite benötigen, ist es kein Problem, die zu löschen width aus dem css und auch, wenn Sie zentrierten Text darin haben möchten p füge Polsterung hinzu, sonst lösche es. Versuche dies:

.absolute-center {
    position:absolute;
    width: 500px;
    padding:50px 0;
    top: 50%;
    left: 50%;
    border: solid 1px red;
    text-align:center;
    transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
  display:inline-block;
  vertical-align:middle;
}

<p class="absolute-center">asdsdada</p>

Überprüfen Sie dies … HTML ist

<p class="absolute-center"></p>

CSS ist

.absolute-center {
    margin: auto;
    background: red; 
    width: 100px;
    height: 100px;
    position:absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}