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?
basta aggiungere position:fixed
e lo manterrà in vista anche se si scorre verso il basso. vederlo su [
#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;
}
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.
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.