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


126

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.


pregunta pregunta. ¿Por qué estás restando 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 funcionar el 50% restante y el 50% superior?
jmoon90

@ jmoon90 Los left: 50%; top: 50%movimientos de la esquina superior izquierda de la .PopupPaneldel centro de la pantalla. Luego lo movemos la mitad del ancho y la altura de nuevo al centro, es el centro. Ver Centrado en css-tricks.com
kub1x

Respuestas:


189

Cambie el positionatributo a en fixedlugar de absolute.


2
¿Qué pasa si necesita desplazarse por la ventana emergente div y es más grande que la pantalla?
Darcbar

Tenga en cuenta que esta no es la solución más receptiva (sino una solución perfecta para el problema anterior). Visite getbootstrap.com/javascript/#modals y mire con sus DevTools para obtener algunas buenas ideas sobre cómo trabajar con sus ventanas emergentes / modales.
Cas Bloem


17

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.


6

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>


4

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;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.