Tengo en mi página un botón que al hacer clic aparece un div (estilo emergente) en el centro de la pantalla.div del centro en el medio de la pantalla, incluso cuando la página se desplaza hacia arriba/abajo
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.
signo de interrogación. ¿Por qué restas margin-top: (200) y margin-left. Siento que este es el medio de la altura y el ancho, pero ¿por qué tenemos que hacer eso para obtener el centro absoluto? ¿No deberían el 50% restante y el 50% superior hacer el truco? – jmoon90
@ jmoon90 The 'left: 50%; arriba: 50% 'mueve la * esquina superior izquierda * del' .PopupPanel' al centro de la pantalla. Luego lo movemos la mitad del ancho y la altura hacia atrás para centrar su centro. Consulte [Centrado en css-tricks.com] (https://css-tricks.com/centering-css-complete-guide/) – kub1x