Используя Jquery, как я могу получить div-элемент для вертикального и горизонтального центрирования при загрузке страницы?

Вот скрипка .

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, есть ли что-то, что я делаю неправильно?

3 3
jquery positioning

3 ответа:

Ладно, смотри сюда: http://jsfiddle.net/zQ97A/13/

В основном вам нужно иметь ширину на вашем контейнере, и Вам также нужен следующий код: 

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

На мой вкус, лучше иметь класс, определенный в css, а затем установить этот класс в div в вашем dom с помощью 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")

Я думаю, что это быстрее, потому что css файлы загружаются раньше js файлов

0

Если вы определяете ширину для вашего .welcomer DIV, ваш код будет работать отлично!

0