div del centro en el medio de la pantalla, incluso cuando la página se desplaza hacia arriba/abajo

Question

Tengo en mi página un botón que al hacer clic aparece un div (estilo emergente) en el centro de la pantalla.

Estoy utilizando el siguiente CSS para centrar el div en el medio de la pantalla.

.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; 
} 

funciona bien siempre y cuando la página no se desplaza hacia abajo ..

Pero si coloco el botón en la parte inferior de mi página y hace clic en él, el div se muestra en la parte superior (el usuario tiene que desplazarse hacia arriba para ver los contenidos del div).

Me gustaría saber cómo mostrar el div en el medio de la pantalla, independientemente de si el usuario se ha desplazado hacia arriba/abajo.

Answer 1

Cambie el atributo position a fixed en lugar de absolute.

Answer 2

Cambio position:absolute; a position:fixed;

Answer 3

Cita: Me gustaría saber cómo mostrar el div en el centro de la pantalla , si el usuario ha desplazado hacia arriba/abajo.

Cambio

position: absolute; 

Para

position: fixed; 

---

especificaciones de W3C para position: absolute y para position: fixed.

Answer 4

Acabo de encontrar un nuevo truco para centrar un cuadro en el medio de la pantalla, incluso si no tiene dimensiones fijas. Digamos que le gustaría una caja de 60% de ancho/60% de altura. La forma de centrarlo es creando 2 cuadros: un cuadro "contenedor" que se coloca a la izquierda: 50% superior: 50% y un cuadro "texto" dentro con la posición inversa izquierda: -50%; arriba: -50%;

Funciona y es compatible con varios navegadores.

Salida el código de abajo, es probable que obtener una mejor explicación:

<div id="message"> 
    <div class="container"><div class="text"> 
     <h2>Warning</h2> 
     <p>The message</p> 
     <p class="close"><a href="#">Close Window</a></p> 
    </div></div> 
    <div class="bg"></div> 
</div> 

<style type="text/css"> 
html, body{ min-height: 100%; } 
#message{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; } 
#message .container{ height: 60%; left: 50%; position: absolute; top: 50%; z-index: 10; width: 60%; } 
#message .container .text{ background: #fff; height: 100%; left: -50%; position: absolute; top: -50%; width: 100%; } 
#message .bg{ background: rgba(0,0,0,0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; } 
</style> 

<script type="text/javascript"> 
jQuery('.close a, .bg', '#message').on('click', function(){ 
    jQuery('#message').fadeOut(); 
    return false; 
}); 
</script> 

Yay!

Answer 5

método correcto es

.PopupPanel 
{ 
    border: solid 1px black; 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    background-color: white; 
    z-index: 100; 
    height: 400px; 
    margin-top: -200px; 

    width: 600px; 
    margin-left: -300px; 
}