使用jQuery在屏幕上居中放置一个DIV

编辑:

如果这个问题教会了我什么，那就是:不要改变已经有效的东西:)

我提供了一个(几乎)一字不差的副本，这是如何处理http://www.jakpsatweb.cz/css/css-vertical-center-solution.html -这是严重黑客的IE，但提供了一个纯CSS的方式来回答这个问题:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

小提琴:http://jsfiddle.net/S9upd/4/

我在浏览器中运行了这个，看起来很好;如果没有别的原因，我将保留下面的原始内容，以便按照CSS规范规定的保证金百分比处理。

原:

看来我要迟到了!

上面有一些评论认为这是一个CSS问题——关注点的分离。让我先说一句，CSS在这个问题上搬起石头砸自己的脚。我的意思是，这样做有多简单:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

对吧?容器的左上角将位于屏幕的中心，如果边框为负，内容将神奇地重新出现在页面的绝对中心!http://jsfiddle.net/rJPPc/

错了!水平定位是可以的，但垂直…哦，我明白了。显然，在css中，当设置顶部边距为%时，该值总是以相对于包含块宽度的百分比计算。就像苹果和橘子一样!如果你不相信我或Mozilla doco，可以通过调整内容宽度来玩上面的小提琴，你会惊讶的。

现在，CSS是我的面包和黄油，我不打算放弃。同时，我喜欢简单的东西，所以我借用了捷克CSS大师的发现，并使其成为一个工作小提琴。长话短说，我们创建了一个表，其中vertical-align设置为中间:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

并且比内容的位置微调了好老距:0 auto;:

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}

工作提琴承诺:http://jsfiddle.net/teDQ2/

2012-03-18 13:06:32

你可以像这样单独使用CSS居中:

工作示例

.center { 位置:绝对的; 高度:50 px; 宽度:50 px; 背景:红色; 顶部:calc(50% - 50px/2);/*高度除以2*/ 左:calc(50% - 50px/2);/*宽度除以2*/ ｝ < div class = "中心" > < / div >

Calc()允许您在css中进行基本计算。

用于calc()的MDN文档浏览器支持表

2013-06-28 15:16:54

我喜欢添加函数到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();

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

2008-10-17 00:22:07

我用这个:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

2015-11-01 12:07:15

之所以会出现这种糟糕的过渡，是因为每次滚动文档时都要调整元素的位置。你想要的是使用固定的定位。我尝试了上面列出的固定中心插件，这似乎解决了这个问题很好。固定定位允许您将一个元素居中一次，CSS属性将在您每次滚动时为您维护该位置。

2010-07-07 18:17:19

编辑: