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

Question

The following code works wonders to center my div as long as there's no padding or 100% width in the css:

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();

Unfortunately, this screws up the padding of my (width: 100%) div in the latests versions of Safari, Firefox, and Chrome (probably all browsers too). The padding on the left is gone, and the padding on the right still exists, but it's off the page, creating a scrollbar. Any suggestions?

Live demo: http://www.pillerdesigns.com/

Answer 1

When I want to center something I normally do this:

jQuery.fn.center = function () {

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

    return this;
}

Anyway, do you have a reset.css? Since your problems are browser specific.

$(element).center();

EDIT :

Add box-sizing: border-box; to your #content div css.

Problem is you're using padding on a 100% width element. box-sizing method will work in all browsers but not IE7 and lower.

-- OR --

Wrap your #content div inside another div, make that one 100% and add the padding to the inner div.