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

posicionamiento relativo css

Question

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

Estoy usando 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 que la página no se desplaza hacia abajo ...

Pero si coloco el botón en la parte inferior de mi página y hago 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, ya sea que el usuario se haya desplazado hacia arriba / abajo.

Answer 1

Cita : 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.

Cambio

position: absolute;

A

position: fixed;

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

Answer 2

Acabo de encontrar un nuevo truco para centrar un cuadro en el medio de la pantalla, incluso si no tienes 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.

Mira el código a continuación, probablemente obtengas 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>

¡Hurra!

Answer 3

Cambiar position:absolute; a la position:fixed;

Answer 4

Cambie el atributo de position a fixed lugar de absolute .

Answer 5

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