Perché è superiore: il 50% in css non funziona?

Question

Sto creando un sito web e sto cercando di centro in verticale:

position: absolute; 
width:1200px; 
height:600px; 
top: 50%; 
left: 50%; 
margin-left: -600px; 

e il mio HTML è una singola proprietà div

Answer 1

Il CSS top funziona esattamente come left. Lo spinge il div da quella direzione. Quando scrivi top:50%, lo div verrà spostato in basso del 50% dall'alto. Vuoi che sia centrato verticalmente, quindi devi neutralizzarlo con tirandolo di nuovo su. Questo può essere fatto usando margin-top: -300px proprio come hai usato margin-left: -600px a tiralo a sinistra.

position: absolute; 
width: 1200px; 
height: 600px; 
top: 50%; 
margin-top: -300px; 
left: 50%; 
margin-left: -600px; 

Answer 2

top:50%; funziona bene, ma "centro" solito la voce, sarà posto è bordo superiore del 50% dell'altezza della pagina dall'alto. Allo stesso modo di come avete margin-left:-600px; si dovrebbe anche aggiungere margin-top:-300px;

Answer 3

Credo che questo possa in qualche modo imitare la risposta Kristian ha dato, ma ecco i miei due centesimi, che include l'utilizzo di percentuali e dimostra anche uno all'interno di un altro:

#parent { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 60px; 
    margin: -60px 0 0 -30px; 
    background: blue; 
} 
#center { 
    position: absolute; 
    width: 50%; 
    height: 50%; 
    top: 50%; 
    left: 50%; 
    margin: -12.5% 0 0 -25%; 
    background: green; 
} 

http://jsfiddle.net/userdude/MYD27/

EDIT

Guardando ulteriormente, penso che si potrebbe incorrere in problemi se si sta cercando per fare ciò con un elemento non contenitore all'interno di un elemento posizionato. Ad esempio:

Full View | Code View

Non penso che funzioni nel modo desiderato. Quando aggiungo position: relative (o, in alternativa position: absolute), funziona penso come desiderato:

Full View | Code View

Answer 4

vorrei cogliere l'occasione per palesemente auto-promuovono my answer to another question here on SO :)

Detto questo, css proprietà "top" viene correttamente calcolato sulla base dell'altezza del elemento contenitore - in modo efficace rendendo l'elemento di destinazione sotto la linea mediana. Ciò significa che l'elemento deve essere spinto a metà altezza come spiegato nella domanda collegata.

Purtroppo tale compito apparentemente semplice, non può essere realizzato regolando margine superiore ecc senza utilizzare valori basati sui pixel assoluti (+1 richiesta di risposta Kristian Antonsen s') - si potrebbe immaginare modificando margin-top a "-50 %" significherebbe proprio questo, ma secondo css spec, valori dei margini anche sull'asse verticale vengono calcolate come a percentage always relative to the width of the containing block

Answer 5

È possibile utilizzare

calc(%50 - (items_height/2)); 

al centro.

Answer 6

Se non si conosce la dimensione della cosa si sta lavorando, ho trovato questa soluzione pulita:

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

(scorrere verso il basso per l'ultimo pezzo di codice nella pagina)

Answer 7

Penso che questo dovrebbe essere utile :)

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

<i>center</i>

Answer 8

Per rispondere alla tua domanda perché top: 50% non funziona, quando si utilizza la proprietà top su un elemento, il genitore di quell'elemento deve avere un'altezza statica impostata. Questo dovrebbe essere in px o un'unità diversa da percentuale. Se hai davvero bisogno di usare la percentuale anche nei tuoi genitori, allora puoi passare al genitore successivo (che è il genitore di quel genitore) e avere quell'altezza statica fissa.

Centrare verticalmente nulla. I prefer to use this method

L'uso di CSS transform poiché non è necessario conoscere la larghezza dell'altezza del proprio elemento.

position: relative; 
top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%); 

Non dimenticare di aggiungere prefissi del browser/vendor.

You can refer here for vendor prefixes.

---

Se non si conosce l'altezza del vostro genitore. Sono disponibili due opzioni:

1. utilizzando Javascript prendere l'altezza naturale dell'elemento genitore e quindi impostare la proprietà altezza di tale elemento genitore al valore appena scattata. Puoi usare questo metodo quando l'altezza dell'elemento genitore è causata da un altro elemento figlio che è fratello dell'elemento che stai centrando.

$('.parent').height($(this).height());

.parent { 
 
    /* Unkown height */ 
 
} 
 

 
.child { 
 
    /* Create columns */ 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.child-1 { 
 
    position: relative; 
 
    top: 50%; 
 
    text-align: center; 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -o-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Example Start --> 
 
<div class="parent"> 
 
    <div class="child child-1"> 
 
    Lorem ipsum 
 
    </div> 
 
    <div class="child child-2"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</div>

Suggerimento: se si sta assumendo reattivo in preoccupazione, basta impostare l'altezza di nuovo in JavaScript nel browser di ridimensionamento. Puoi ottenere la nuova altezza naturale impostando l'altezza su Auto in JavaScript e ripetere la procedura.

2. È possibile graffiare le idee sopra e utilizzare invece il centraggio con display: table. CSS-Tricks has a very good example here.