7

我需要在屏幕中央放置一个 div 元素。我在下面找到了一个简单的代码，但我需要实际屏幕的中心，而不是页面的“总高度/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 应该再次位于中心。

4

3 回答 3

11

如果您可以使用fixed定位而不是absolute，则可以使用以下内容：

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/

于 2013-02-26T13:57:00.693 回答
1

它有效..把它当作潜水#sample

将其 css 样式设为

#sample{
margin-left:auto;
margin-right:auto;
width:200px;//your wish
}

认为它有效..

于 2013-02-26T13:41:35.127 回答
0

尝试这个：

var width=$("#div").css("width");
var half=width/2;
$("#div").css("marginLeft","-"+half+"px");

使用您的选择器更改#div。

于 2013-02-26T13:40:44.237 回答