使用jQuery水平和垂直居中填充全角DIV

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中。