¿Cuál es la mejor manera de hacer una ventana emergente perfectamente centrada en el medio de la página?

Hay algunos detalles sobre una forma de lograr el centrado vertical sin elementos adicionales o JS, utilizando pseudoelementos CSS, descritos aquí: http://css-tricks.com/centering- … No he tenido la oportunidad de usarlo en la práctica, pero si funciona, parece razonable usarlo sobre las otras soluciones en mi opinión.

height: 100px; left: 50%; margin-left: -100px; // Half of width margin-top: -50px; // Half of height position: absolute; top: 50%; width: 200px; 

Pero supongo que se refiere a un cuadro de diálogo modal aquí y no a una ventana emergente del navegador.

Eche un vistazo a http://www.popu.ps para crear y gestionar ventanas emergentes fácilmente.

POPU.PS es un servicio web que le ayuda a crear y administrar ventanas emergentes para sus sitios web. Es rápido y fácil de usar. Luego, reúne análisis importantes sobre cómo están progresando sus ventanas emergentes. Una gran herramienta en línea para propietarios de sitios web únicos, desarrolladores, webmasters o comercializadores.

La forma más sencilla y receptiva de hacerlo es con una tabla.

En ese punto, solo necesita agregar 1 línea de css y 0 líneas de javascript

  #popup {margin: 0px auto;  ancho: ancho de ventana emergente;}

Este método tendrá en cuenta el cambio de tamaño del navegador y lo que tenga.

El otro método que he usado es con JavaScript.

  // almacenar popup en una variable
 var $ popup = $ ('# popup');

 // toma tus dimensiones
 var popupWidth = ancho de popup;
 var popupHeight = altura de ventana emergente;
 var windowWidth = window.outerWidth;
 var windowHeight = window.outerHeight;

 // calcular algunos css
 $ popup.css ({
   posición: absoluta, // o fija
   izquierda: (windowWidth / 2) - (popupWidth / 2),
   arriba: (windowHeight / 2) - (popupHeight / 2)
 });

El beneficio de usar la versión de JavaScript es que puede admitir ventanas emergentes con un ancho variable.

  construir ventana emergente ...

 // almacenar popup en una variable
 var $ popup = $ ('# popup');

 // añádelo a la página
 $ ('cuerpo'). append ($ popup);

 // tomar dimensiones emergentes
 var popupWidth = $ popup.outerWidth ();
 var popupHeight = $ popup.outerHeight ();

 // ocultar ventana emergente de la vista
 $ popup.hide ();

 // toma las dimensiones de tu ventana
 var windowWidth = window.outerWidth;
 var windowHeight = window.outerHeight;

 // calcular algunos css
 $ popup.css ({
   posición: absoluta, // o fija
   izquierda: (windowWidth / 2) - (popupWidth / 2),
   arriba: (windowHeight / 2) - (popupHeight / 2)
 });

 // mostrar ventanas emergentes
 $ popup.show ();  // o $ popup.fadeIn ()

La desventaja de la versión de JavaScript es que no permanecerá centrada cuando cambie el tamaño del navegador. Para resolver esto, necesitaría duplicar este código en la devolución de llamada $(window).resize() .

Voy a soltar esto aquí si lo necesitas; no es CSS, pero como es probable que hagas la ventana con Javascript / jQuery de todos modos, pensé que no estaría mal enumerar un recurso.

  $ .fn.centerMe = función (e) {
		 var figures = new Array ();
		 cifras [0] = $ (ventana) .height ();
		 figuras [1] = $ (ventana) .width ();
		 cifras [2] = $ (this) .height ();
		 figuras [3] = $ (este) .width ();
			 for (var i = 0; i 
  Pegue esto y todo lo que necesita hacer para centrar un objeto es pasarlo a esta función de la siguiente manera: 
  $ ('# myDiv'). centerMe ('both');

  El código anterior se centra tanto horizontal como verticalmente.  También puede pasarlo solo 'horizontal' o 'vertical' para lograrlo en el otro en lugar de ambos.  Esto también elimina tener que conocer el tamaño de la ventana de antemano si se crea dinámicamente porque encuentra la altura actual del objeto. 
  Espero que esto haya ayudado!