我如何去设置一个<div>在屏幕的中心使用jQuery?


当前回答

编辑:

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

我提供了一个(几乎)一字不差的副本,这是如何处理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/

其他回答

我用这个把UL放在中间位置。

cadasWidth          = $('.card-dashboard').innerWidth();
cadasWidthCenter    = cadasWidth/2;

ulmenuWidth         = $('.card-dashboard ul#menu').outerWidth();
ulmenuWidthCenter   = ulmenuWidth/2;

ulmenuStart = cadasWidthCenter - ulmenuWidthCenter;

$('.card-dashboard ul#menu').css({
    'left' : ulmenuStart,
    'position' : 'relative'
});

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

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

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

$.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");
    });
};

我更新了托尼的答案 这是他的答案的修改版本,我现在虔诚地使用。我想我会分享它,因为它为你可能有的各种情况增加了更多的功能,比如不同类型的位置,或者只想要水平/垂直居中,而不是两者都要。

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

在我的<head>:

<script src="scripts/center.js"></script>

用法示例:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

它适用于任何定位类型,可以轻松地在整个网站中使用,也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区,为中心的东西正确。

希望这是有用的人在那里!享受。

请使用这个:

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();