ansaurus

Question

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

Answer 1

+1 A:

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.

Fabian 2010-04-08 13:14:43

Answer 2

+3 A:

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>

Jon 2010-04-11 21:35:49

ansaurus

tags:

views:

answers:

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

related questions