title: Center DIV in the visible area of page by jquery or javascript
body: <p>my page is very big. so vertical scrollbar is coming. suppose i am in the middle of the page from where i can go up &amp; down by scrolling. i want that when i am in the middle of the page then my div should be placed in the center of the visible area of the page not center in the page. i need to show div at the center of visible area in the page of my browser window. i am not sure that i could explain what i want to say or not. visible area mean the area i can see at a time without scroll and not the whole page.</p>
  
  <p>so please guide me how to get height &amp; width of visible area of page not whole page.
  guide me how to place at the center of visible area of page but not whole page. visible area does not mean the whole page rather the area which i can see at a time without scrolling the page.</p>
  
  <p>i search google and found guide line and i wrote the code accordingly but it did not work.</p>
  
  <p>so here is my code which does not work according to my requirement.</p>
  
  <pre><code>$(".ui-dialog").animate({
  left: viewportwidth / 2 - $(".ui-dialog").outerWidth() / 2, 
  top: viewportheight / 2 - $(".ui-dialog").outerHeight / 2
  }, 1000);
  </code></pre>
  
  <p>detect viewport area like</p>
  
  <pre><code>var viewportwidth;
  var viewportheight;
  
  // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  
  if (typeof window.innerWidth != 'undefined') {
      viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
  }
  
  // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  
  else if (typeof document.documentElement != 'undefined'
   &amp;&amp; typeof document.documentElement.clientWidth !=
   'undefined' &amp;&amp; document.documentElement.clientWidth != 0) {
      viewportwidth = document.documentElement.clientWidth,
     viewportheight = document.documentElement.clientHeight
  }
  
  // older versions of IE
  
  else {
      viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
     viewportheight = document.getElementsByTagName('body')[0].clientHeight
  }
  </code></pre>
  
  <p>this does not work in FF browser and it causes problem in IE that whatever i place in my jquery dialog that gone out of eye.</p>
  
  <p>so please help me to figure out that how to show div at visible area on the page.</p>
  
  <p>thanks</p>