Cómo colocar un div en el medio de la pantalla cuando la página es más grande que la pantalla

Hola, estoy usando algo similar a lo siguiente para obtener un div colocado en el medio de la pantalla:

 #mydiv { position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; }  
Test Div

Sin embargo, el problema con esto es que coloca el elemento en el medio de la página, no en la pantalla. Entonces, si la página tiene algunas pantallas altas y estoy en la parte superior de la página (la parte superior de la parte se muestra en la pantalla) cuando hago que aparezca el div, ni siquiera aparece en la pantalla. Tienes que desplazarte hacia abajo para verlo.

¿Puede alguien decirme cómo lo haría aparecer en el medio de la pantalla?

solo agrega position:fixed y la mantendrá a la vista incluso si te desplazas hacia abajo. verlo en http://jsfiddle.net/XEUbc/1/

 #mydiv { position:fixed; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; } 

Creo que esta es una solución simple:

 
Full Center ON Page

Si conoce el tamaño del elemento, simplemente puede usar la propiedad de margin :

 #mydiv { position: fixed; top: 50%; left: 50%; margin-top: -50px; //assuming that #mydiv has the height of 100px margin-left: -100px; //assuming that #mydiv has the width of 200px } 

Tenga en cuenta que debe usar la mitad del ancho y la altura del elemento

Pero si no está seguro del tamaño, esto hará el truco:

 #mydiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

Usa la transformación

  

Solución de Javascript:

 var left = (screen.width / 2) - (530 / 2); var top = (screen.height / 2) - (500 / 2); var _url = 'PopupListRepair.aspx'; window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no"); 

Solo ponga margin:auto;

 #mydiv { margin:auto; position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; } 

 
Test Div

Respuesta corta, solo agrega position:fixed y eso resolverá tu problema

 position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 

Esto funcionó para mí

      
Maitrey

Bueno, abajo está el ejemplo de trabajo para esto.

Esto manejará la posición central si cambia el tamaño de la página web o carga en anysize.

 < !DOCTYPE html>      

En la página de script ur …

  $('.a-middle').css('margin-top', function () { return ($(window).height() - $(this).height()) / 2 }); 

Usa una clase media en la Div …

  
 < !DOCTYPE html>      

Acabo de probar ese código exacto en una página de prueba y centró el div perfectamente en la página, incluso con unos 100
antes de intentarlo y presionarlo hacia abajo.

Tal vez intente verificar el rest de su código para ver si tiene algo que sobreescribe los valores del DIV o que está afectando su DIV para causar estos problemas.

 width:30em; position: static; margin: 0px auto 0px auto; padding: 0px; 

Para esto, tendrías que detectar el tamaño de la pantalla. Eso no es posible con CSS o HTML; necesitas JavaScript Aquí está la entrada del Centro de desarrolladores de Mozilla en las propiedades de la ventana https://developer.mozilla.org/en/DOM/window#Properties

Detecte la altura y la posición disponibles en consecuencia.