如何使用jQuery将DIV置于页面的确切中心？

我需要使用jquery将DIV置于页面的正中心。 我对DIV的CSS样式如下：

#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'}); 

刷新时，此代码不会在我的页面上调用任何操作。 我究竟做错了什么？

Answer 1

试试这个： 工作示例

确保#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*/  
 
  

Answer 2

我首先删除+ 'px'或在pagecenterH-250和pagecenterW-200周围添加圆括号。

你在做什么是int + int - string 。

Answer 3

使用绝对值时，在窗口大小调整时，框位置不会改变（例如，横向到纵向）。 使用固定而不是。 有关基本示例，请使用中心插件查看jQuery center元素到视口 。