Nella mia pagina ho un pulsante che, quando cliccato, mostra uno div
(stile pop-up) al centro del mio schermo.
Sto usando il seguente CSS per centrare div
il centro dello schermo:
.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
Questo CSS funziona bene fino a quando la pagina non viene fatta scorrere verso il basso.
Ma, se posiziono il pulsante in fondo alla mia pagina, quando viene cliccato, div
viene visualizzato in alto e l'utente deve scorrere verso l'alto per visualizzare il contenuto di div
.
Vorrei sapere come visualizzare il div
centro dello schermo, anche quando la pagina è stata fatta scorrere.
left: 50%; top: 50%
Sposta l' angolo in alto a sinistra del .PopupPanel
centro dello schermo. Lo spostiamo quindi metà della larghezza e dell'altezza al centro, al centro. Vedi Centering su css-tricks.com