jquery - 使用 Jquery 如何让 div 元素在页面加载时垂直和水平居中？

Question

这是fiddle .

HTML:

<div id="greeter" class="welcomer">
    <h1>This should be centered</h1>
</div>

jquery:

$(document).ready(function(){

$(window).resize(function(){

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

});

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

});​   

​

其工作方式似乎存在错误。有时它会居中，有时它只会垂直或水平居中。我是 javascript 和 jquery 的新手，我做错了什么吗？

Answer 1

好的，看这里:http://jsfiddle.net/zQ97A/13/

基本上，您需要在容器上设置宽度，并且还需要以下代码:

"top": ((($(window).height() - $('.welcomer').outerHeight()) / 2) + $(window).scrollTop() + "px"),
"left": ((($(window).width() - $('.welcomer').outerWidth()) / 2) + $(window).scrollLeft() + "px")