El elemento no se pega verticalmente en el medio de la pantalla

He intentado crear una ventana emergente modal utilizando JQuery, pero de alguna manera estoy atascado en el punto en que no puedo centralizar correctamente mi elemento (El punto clave es que el elemento siempre está centralizado independientemente de la resolución de tu pantalla). El siguiente jsfiddle escrito es el código que quiero que el elemento esté verticalmente centralizado (como horizontalmente centralizado se puede hacer usando CSS).

HTML: Prueba

CSS:

.ex_event_frame { left: 39px; margin-left: auto; margin-right: auto; width: 300px; height: 300px; overflow: auto; background: #2e3030; color: #ffffff; position: absolute; z-index: 101; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 14px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4); -box-shadow: 0 0 10px rgba(0, 0, 0, .4); border: 8px solid #105f6b; } 

Javascript:

 $(function () { var offset = 0, viewportHeight = $(window).height(), $myDialog = $('#ev-entry'); $myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.Height() / 2)); }); 

Aquí el violín que he creado: http://jsfiddle.net/8v9k9/2/

Me estoy quedando sin ideas y espero poder escuchar las respuestas lo antes posible. ¡Gracias por adelantado!

MANIFESTACIÓN

 $(function () { $(window).resize(function(){ var offset = 0, viewportHeight = $(window).height(), $myDialog = $('#ev-entry'); console.log(viewportHeight + " "+$myDialog.height() ) $myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.height() / 2)); }).resize(); }); 

  • Es .height() lugar de .Height()
  • Está dentro de $(window).resize() por lo que se ajusta también en el tamaño

Si necesita centrar un elemento de posición absoluta, necesita hacer este pequeño truco, no requiere jQuery.

El css cambiado:

 .ex_event_frame { width: 300px; height: 300px; left: 50%; /* Changed CSS */ top: 50%; /* Changed CSS */ margin-left: -150px; /* Changed CSS - Change to half of the elements width */ margin-top: -150px; /* Changed CSS - Change to half of the elements height */ overflow: auto; background: #2e3030; color: #ffffff; position: absolute; z-index: 101; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 14px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4); -box-shadow: 0 0 10px rgba(0, 0, 0, .4); border: 8px solid #105f6b; } 

Aquí hay un violín: Demo – eliminar / mostrar en url para ver el código