CSS解决方案 只有两行

它集中你的内部div水平和垂直。

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

对于仅水平对齐，更改

margin: 0 auto;

对于垂直方向，改变

margin: auto 0;

我不认为有一个绝对位置将是最好的，如果你想要一个元素总是居中在页面的中间。你可能需要一个固定的元素。我发现另一个jquery定心插件使用固定定位。这叫做固定中心。

你可以使用CSS translate属性:

position: absolute;
transform: translate(-50%, -50%);

阅读这篇文章了解更多细节。

这是我的版本。看完这些例子后，我可能会改变它。

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

为了使元素相对于浏览器视窗居中，不要使用position: absolute，正确的位置值应该是固定的(absolute的意思是:“元素的位置相对于它的第一个定位(不是静态的)祖先元素”)。

这个中心插件的替代版本使用“%”而不是“px”，所以当你调整窗口大小时，内容保持居中:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

你需要把margin: 0从宽度/高度中排除内容边距(因为我们使用的是位置固定，有边距没有意义)。 根据jQuery文档使用. outerwidth (true)应该包括边缘，但当我在Chrome中尝试时，它没有像预期的那样工作。

50*(1比)来自:

窗口宽度:W = 100%

元素宽度(%):w = 100 * elementWidthInPixels/windowWidthInPixels

它们计算左边居中:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

我喜欢添加函数到jQuery，所以这个函数会有帮助:

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

现在我们可以写成:

$(element).center();

演示:小提琴(添加参数)