Question

只要css中没有填充或100％宽度，下面的代码就会使我的div居中奇迹：

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

$(element).center();

不幸的是，这会在Safari，Firefox和Chrome（可能也是所有浏览器）的最新版本中搞砸我（宽度：100％）div的填充。左边的填充消失，右边的填充仍然存在，但它离开页面，创建一个滚动条。有什么建议吗？

现场演示：http://www.pillerdesigns.com/

Answer 1

当我想要居中时，我通常会这样做：

jQuery.fn.center = function () {

    this.css({
        position: 'absolute',
        top: 50+'%',
        left: 50+'%',
        marginTop: -(this.outerHeight()/2),
        marginLeft: -(this.outerWidth()/2)
    });

    return this;
}

无论如何，你有一个reset.css吗？由于您的问题是浏览器特定的。

$(element).center();

修改：

将box-sizing: border-box;添加到您的#content div css。

问题是你在100％宽度的元素上使用填充。 box-sizing方法适用于所有浏览器，但不适用于IE7及更低版本。

- 或 -

将你的#content div包裹在另一个div中，使其成为100％并将填充添加到内部div。

使用jQuery水平和垂直中心填充，全宽DIV

1 个答案: