centrar div en el centro de la pantalla-incluso cuando la página se desplaza hacia arriba / hacia abajo

Cambiar position:absolute; a position:fixed;

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

Cambiar

position: absolute;

A

position: fixed;

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

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

Funciona y es compatible con navegadores.

Echa un vistazo al código a continuación, probablemente obtenga 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!

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