Centratura CSS assoluta

Question

Recentemente mi sono imbattuto in questo metodo utilizzato per posizionare un elemento sia orizzontalmente che verticalmente al centro. Tuttavia, non ero in grado di capire cosa stia facendo ciascuna proprietà. Qualcuno potrebbe spiegarmi qual è l'effetto sull'impostazione di top:0, bottom:0, left:0, right:0?

(Sarebbe bello se siete in grado di spiegarlo usando termine laico o fornire un'immagine illustrativo.)

Inoltre, qual è l'uso di impostare la visualizzazione a tavola?

.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

è possibile ridurre il css per questo:

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

L'elemento absolute con immobili come bottom: 0; top: 0; left: 0; right: 0; riempirà tutto lo spazio.

Quindi, qual è il segreto/stregoneria qui?

Si sta definendo la larghezza e l'altezza dell'elemento. Quindi, anche se vuole riempire tutto lo spazio, sarà limitato dalla larghezza e dall'altezza.

Il segreto è il margin: auto, perché? Perché l'elemento riempirà la spaziatura rimanente con margine. In questo modo, poiché la larghezza e l'altezza sono definite, avrà tale dimensione ma il margine riempirà il resto del contenitore/genitore nel modo in cui le opere sono auto, di dimensioni uguali su entrambi i lati.

A causa dello margin:auto è necessario definire larghezza e altezza.

Answer 2

Dividiamolo un po ':

Se è stato il seguente CSS (I applicare al vostro markup corrente):

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

Si può vedere che la div.absolute-center riempie l'intero elemento principale (in questo caso body), semplicemente impostando tutte le proprietà top, bottom, right e left.

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

Così, quando aggiungiamo width (in aggiunta height) al precedente CSS, l'elemento è limitata a questa dimensione.

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

E infine la magica margin: auto che rende l'elemento di essere centrato.

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

Answer 3

Selezionare questa ... HTML è

<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

Hai solo bisogno di aggiungere posizioni di vertice e di sinistra e aggiungere trasformare. Se non hai bisogno di una larghezza fissa, non è un problema eliminare il width dal css e anche se vuoi che il testo centrato all'interno di p aggiunga padding altrimenti lo elimini. Prova questo:

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