Come posizionare un div al centro dello schermo quando la pagina è più grande dello schermo

Ciao, sto usando qualcosa di simile al seguente per ottenere un div posizionato al centro dello schermo:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>

<div id="mydiv">Test Div</div>

Tuttavia il problema con questo è che posiziona l'elemento al centro della pagina e non dello schermo. Quindi se la pagina è alta qualche schermo e io sono in cima alla pagina (la parte superiore della parte viene visualizzata sullo schermo) quando faccio apparire il div non è nemmeno sullo schermo. Bisogna scorrere verso il basso per visualizzarlo.

Qualcuno può dirmi come si fa a farlo apparire al centro dello schermo?

Hussein
Domanda modificata 16º febbraio 2011 в 3:33
Programmazione
window html css center
16º febbraio 2011 в 3:06
14 visualizzazioni
Soluzione

basta aggiungere position:fixed e lo manterrà in vista anche se si scorre verso il basso. vederlo su [http://jsfiddle.net/XEUbc/1/][1]

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
Hussein
Risposta modificata 16º febbraio 2011 в 3:32
Commentari (2)

Ho appena testato questo esatto codice su una pagina di prova e ha centrato perfettamente il div sulla pagina, anche con circa 100 <br /> prima di esso per cercare di spingerlo verso il basso.

Forse prova a controllare il resto del tuo codice per vedere se hai qualcosa che sta sovrascrivendo i valori del DIV'o che sta influenzando il tuo DIV per causare questi problemi.

Commentari (1)

Per questo dovreste rilevare le dimensioni dello schermo. Questo non è possibile con CSS o HTML; avete bisogno di JavaScript. Ecco la voce del Mozilla Developer Center sulle proprietà della finestra https://developer.mozilla.org/en/DOM/window#Properties

Rilevare l'altezza disponibile e posizionarla di conseguenza.

Scott Radcliff
Risposta modificata 16º febbraio 2011 в 3:30
Commentari (0)