¿Centrar un 'div' en el centro de la pantalla, incluso cuando la página se desplaza hacia arriba o hacia abajo?

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

Estoy usando el siguiente CSS para centrar el diven 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;
}

Este CSS funciona bien siempre que la página no se desplace hacia abajo.

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

Me gustaría saber cómo mostrar el diven el medio de la pantalla, incluso cuando la página se ha desplazado.

Cambie el positionatributo a en fixedlugar de absolute.

Cambiar position:absolute;aposition:fixed;

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

Cambio

position: absolute;

A

position: fixed;

Especificaciones del W3C para position: absolutey para position: fixed.

Acabo de encontrar un nuevo truco para centrar un cuadro en el centro de la pantalla, incluso si no tienes dimensiones fijas. Digamos que desea una caja de 60% de ancho / 60% de altura. La forma de centrarlo es mediante la creación de 2 cuadros: un cuadro de "contenedor" que se coloca a la izquierda: 50% arriba: 50%, y un cuadro de "texto" en el interior con la posición inversa a la izquierda: -50%; arriba: -50%;

Funciona y es compatible con varios navegadores.

Consulte el código a continuación, probablemente obtenga una mejor explicación:

jQuery('.close a, .bg', '#message').on('click', function() {
  jQuery('#message').fadeOut();
  return false;
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

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