CSS absolute Zentrierung

Question

Kürzlich bin ich auf diese Methode gestoßen, um ein Element sowohl horizontal als auch vertikal zur Mitte zu positionieren. Allerdings war ich nicht in der Lage, herauszufinden, was jeder der Immobilie tut. Würde mir jemand erklären können, wie sich die Einstellung auf top:0, bottom:0, left:0, right:0 auswirkt?

(Wäre toll, wenn Sie in der Lage sind, es zu erklären Laien Begriff verwenden oder ein anschauliches Bild zur Verfügung stellen.)

Auch, was die Verwendung ist die Anzeige zu Tisch zu setzen?

.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>

Answer 1

Sie die CSS diese reduzieren können:

.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 füllen.

Also, was ist das Geheimnis/Zauberei hier?

Sie definieren die Breite und Höhe des Elements. Also, auch wenn er den ganzen Raum ausfüllen möchte, wird er durch deine Breite und Höhe begrenzt sein.

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

Wegen der margin:auto müssen Sie Breite und Höhe definiert haben.

Answer 2

sie es ein bisschen brechen:

Wenn Sie die folgenden CSS haben (ich es zu Ihrem aktuellen Markup gelten):

.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 das Element gesamte Mutter füllen (in Dieser Fall body), nur durch die Einstellung aller Eigenschaften , bottom, right und left.

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

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

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

Und schließlich die magische margin: auto, die das Element zentriert werden macht.

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

Answer 3

prüfen diese ... HTML ist

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

CSS

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

Answer 4

ist Sie müssen nur oben und links Positionen hinzufügen und fügen Sie verwandeln. Wenn Sie keine feste Breite benötigen, ist es kein Problem, die width aus dem CSS zu löschen und auch wenn Sie zentrierten Text innerhalb p hinzufügen wollen, fügen Sie andernfalls löschen. Versuchen Sie folgendes:

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

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