且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何使用jQuery将DIV定位在页面的确切中心?

更新时间:2021-11-20 03:09:28

尝试以下操作:工作示例

请确保#page-content上没有任何样式限制中心框,然后尝试将jquery代码放入文档就绪事件中.

Make sure you don't have any styles on #page-content that are constraining center-box and try putting your jquery code in the document ready event.

/*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>