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

Question

Here is the 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();

});​   

​

There seems to be a bug in how this works. Some times it will center and other times it will only center vertically or horizontally. I am new to javascript and jquery, is there something that I'm doing wrong?

Answer 1

Ok, lookie here: http://jsfiddle.net/zQ97A/13/

Basically you need to have width on your container and you also need the following code:

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

Answer 2

To my taste it's better to have a class defined en a css, and then set that class to a div into your dom with jquery.

#custom.css
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -(your_div_height/2)px;
  margin-left: -(your_div_weight/2)px;
}

#custom.js
$(#greeter).addClass("center")

I thing this is more faster becouse the css files load before the js files

Answer 3

如果您为.welcomer DIV定义宽度，您的代码将完美运行！