How do I center a DIV in the exact center of a page using jQuery?

问题

I need to center a DIV in the exact center of a page using jquery. My CSS style for the DIV is as follows:

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

and my jQuery for centering is as follows:

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

This code does not invoke any action on my page when refreshed. What am I doing wrong?

回答1:

Try this: Working Example

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>

回答2:

Id start with removing the + 'px' or add round brackets around pagecenterH-250 and pagecenterW-200.

What you are doing there is int + int - string.

回答3:

Using absolute, the box position does not change on window resize (landscape to portrait for example). Use fixed instead. See jQuery center element to viewport using center plugin for a basic example.

来源：https://stackoverflow.com/questions/2599996/how-do-i-center-a-div-in-the-exact-center-of-a-page-using-jquery

标签

jquery

html

center