如何使用 jQuery 将 DIV 居中在页面的确切中心？答案

【问题标题】：How do I center a DIV in the exact center of a page using jQuery?如何使用 jQuery 将 DIV 居中在页面的确切中心？
【发布时间】：2011-02-05 16:46:27
【问题描述】：

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

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

【问题讨论】：

很抱歉问题文本中的代码出现乱码，我不知道如何分隔代码。
选择整个代码并按Cmd+K 或Ctrl+K。或点击顶部带有数字123的小图标

标签： jquery html center

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：