Question

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

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

我的jQuery for centering如下：

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

试试这个：Working Example

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

Answer 2

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

你在做什么int + int - string。

Answer 3

使用绝对值，在窗口调整大小时（例如，横向到纵向），框位置不会改变。使用固定而不是。有关基本示例，请参阅jQuery center element to viewport using center plugin。

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

3 个答案: