如何将div元素定位在ACTUAL屏幕的中心? (JQuery的)

我需要将div元素放在屏幕的中心.我在下面找到了一个简单的代码,但我需要ACTUAL屏幕的中心,而不是页面的“总高度/ 2”!

这里是Jquery代码,它以元素为中心,但不是实际的屏幕;

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top",( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left",( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;}

正如我所说,我需要计算实际的屏幕尺寸(如1366 * 768或任何用户调整其浏览器的大小)并将元素定位在屏幕的中心.所以,如果我向下滚动页面,总是居中的div应该再次位于中心.

解决方法

如果您使用固定定位而不是绝对定位,则可以使用以下内容
jQuery.fn.center = function ()
{
    this.css("position","fixed");
    this.css("top",($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left",($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

$('#myDiv').center();
$(window).resize(function(){
   $('#myDiv').center();
});

演示:http://jsfiddle.net/GoranMottram/D4BwA/1/

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效