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

Tengo en mi página un botón que cuando se hace clic muestra un div (estilo emergente) en el medio de mi pantalla.

Estoy usando el siguiente CSS para centrar el div en 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, el div se muestra en la parte superior, y el usuario tiene que desplazarse hacia arriba para ver el contenido de la div.

me gustaria saber como mostrar div en el medio de la pantalla, incluso cuando la página se ha desplazado.

Cambiar el position atribuir a fixed en vez de absolute.

Cambio position:absolute; a position:fixed;

Cotizar: Me gustaría saber cómo mostrar el div en el medio de la pantalla, ya sea que el usuario se haya desplazado hacia arriba o hacia abajo.

Cambio

position: absolute;

A

position: fixed;

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

Acabo de encontrar un nuevo truco para centrar un cuadro en el medio de la pantalla aunque no tengas dimensiones fijas. Digamos que le gustaría una caja de 60% de ancho / 60% de alto. La forma de hacerlo centrado es creando 2 cuadros: un cuadro de “contenedor” que se coloca a la izquierda: 50% superior: 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.

Mira el siguiente código, probablemente obtengas 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;
}