Impostazione della percentuale superiore CSS non funziona come previsto

Question

Ho provato un layout css reattivo, ma "top: 50%" non può funzionare e il "left: 50%" can. Perché è successo?

<div style="position:relative;top:0%;left:0%;height:100%;width:100%"> 
    <div style="position:absolute;top:50%;left:50%;"> 
    </div> 
</div> 

Answer 1

Definire una dimensione per il contenitore padre, ad es. div:

<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px"> 
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%"> 
    </div> 
</div> 

O

Un altro modo è quello di allungare solo il contenitore principale, vale a dire div, con il suo superiore, inferiore, a sinistra, e le proprietà giuste. Come questo:

<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;"> 
    <div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%"> 
    </div> 
</div> 

Answer 2

Considerate la vostra HTML originale:

html, body { 
 
    height: 100%; 
 
}

<div style="position:relative;top:0%;left:0%;height:100%;width:100%"> 
 
    <div style="position:absolute;top:50%;left:50%;">test</div> 
 
</div>

L'interno/bambino div ha position: absolute, quindi è fuori dal flusso contenuto dell'elemento genitore e la volontà non contribuisce all'altezza o alla larghezza dell'elemento genitore.

Il genitore div si trova nel flusso di contenuti, ma non ha contenuto, quindi l'altezza intrinseca di sarebbe zero. Tuttavia, hai specificato height: 100%, ma questo non farà nulla perché lo div non ha un riferimento di altezza su cui basare un valore calcolato. Quindi il valore di altezza calcolato per il genitore div è zero.

Come risultato, l'offset top dell'elemento figlio viene calcolato a 50% di zero, in modo che sia posizionato sul bordo superiore del blocco principale.

Si avrebbe bisogno sia di specificare un'altezza per il genitore div o assegnare

html, body {height: 100%} 

in quanto ciò consentirebbe al div di calcolare la sua altezza in base all'altezza del body, che si basa su l'altezza di html, che è al 100%, prende quella dello schermo.

Answer 3

Vedere il link sottostante. Credo che otterrai un risultato migliore con Fixed per quello che stai cercando di fare, anche se non sono ancora al 100% sicuro di aver capito di cosa si tratta.

http://jsfiddle.net/8q107wvb/1/

body {background:#e9e9e9; color:#202020;} 
#wrapper {width:500px; background:#fff; margin:50% auto;} 
.centered-content {position: fixed; top: 50%; left: 50%; background:#fff; padding:20px;}