1

我需要使用 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'});

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

4

3 回答 3

4

试试这个：工作示例

确保您在#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>
于 2010-04-11T21:35:49.267 回答
1

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

你在那里做的是int + int - string。

于 2010-04-08T13:14:43.680 回答
0

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

于 2012-05-06T09:16:49.953 回答