Как центрировать DIV точно по центру страницы с помощью jQuery?

Мне нужно центрировать DIV точно по центру страницы, используя jquery. Мой стиль CSS для DIV выглядит следующим образом:

#page-content #center-box{
 position:absolute;
 width:400px;
 height:500px;
 background:#C0C0C0;
 border:1px solid #000;
 }

и мой jQuery для центрирования выглядит следующим образом:

windowheight = $(window).height();
windowwidth = $(window).width();
pagecenterW = windowwidth/2;
pagecenterH = windowheight/2;
$("div#page-content div#center-box")
    .css({top: pagecenterH-250 + 'px', left: pagecenterW-200 + 'px'});

Этот код не вызывает никаких действий на моей странице при обновлении. Что я делаю неправильно?


html jquery center
person sadmicrowave    schedule 08.04.2010    source источник
comment
извините за искажение кода в тексте вопроса, я не знаю, как отделить код.   -  person sadmicrowave    schedule 08.04.2010
comment
выберите весь код и нажмите Cmd+K или Ctrl+K. или нажмите на маленькую иконку с цифрами 123 вверху   -  person Anurag    schedule 12.04.2010

Ответы (3)


arrow_upward
4
arrow_downward

Попробуйте следующее: Рабочий пример

Убедитесь, что у вас нет стилей #page-content, ограничивающих центральную рамку, и попробуйте поместить код jquery в событие готовности документа.

/*CSS*/
#center-box{
 position:absolute;
 width:400px;
 height:500px;
 background:#C0C0C0;
 border:1px solid #000;
 }

/*js*/
$(document).ready(function(){
  var windowheight = $(window).height();
  var windowwidth = $(window).width();
  var pagecenterW = windowwidth/2;
  var pagecenterH = windowheight/2;
  $("div#center-box")
      .css({top: pagecenterH-250 + 'px', left: pagecenterW-200 + 'px'});
});

/*html*/
<body>
  <div id="center-box">

  </div>
</body>
person Jon    schedule 11.04.2010

arrow_upward
1
arrow_downward

Я бы начал с удаления + 'px' или добавления круглых скобок вокруг pagecenterH-250 и pagecenterW-200.

То, что вы там делаете, это int + int - string.

person Fabian    schedule 08.04.2010

arrow_upward
0
arrow_downward

При использовании absolute положение окна не меняется при изменении размера окна (например, из альбомного в портретный). Вместо этого используйте фиксированный. См. центральный элемент jQuery для просмотра с использованием центрального плагина для базового пример.

person Mike    schedule 06.05.2012