title: clientHeight not working in JavaScript?
body: <p>I'm learning JavaScript and created a countdown timer HTML page in which javascript code seems to be returning a wrong <code>clientHeight</code> of the body. I want to show my countdown HTML <code>&lt;div&gt;</code> in middle (vertically) of the body even when browser is re-sized. Please tell me where I am wrong.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;CountDown Timer&lt;/title&gt;
  &lt;script type="text/javascript" &gt;
  function countdown(){
      if(isNaN(document.getElementById("time").value))
      {
         document.getElementById("time").value = "Enter Valid Number";
         return;
      }
      else
      {       
         var i = document.getElementById("time").value;
         var j=setInterval(function (){document.getElementById("new").innerHTML = i; i--;
         if(i == -2){
           document.getElementById("new").innerHTML = "Welcome";   
           clearInterval(j);}},1000);
         }
      }
  
      function heightadjust(){
         document.getElementById("main1").style.top = ((document.body.clientHeight/2)+54).toString() + "px";
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onresize="heightadjust();" onload="heightadjust();"&gt;
  &lt;div style="margin:0 auto;" id="main1"&gt;
     &lt;center&gt;
       &lt;div id="new" style="display:inline-block; padding:3px; font-size:60px; text-align:center; border:3px solid #000000; background-color:#CC3300; color:#FFFFFF; border-radius:6px;"&gt;Enter Time Below&lt;/div&gt;
       &lt;br /&gt;
       &lt;input type="text" id="time" onfocus="this.value = ''; this.style.color = '#000000';" value="Enter Time here" style="color:#999999;" /&gt;
       &lt;button onclick="countdown();" &gt;Start&lt;/button&gt;
     &lt;/center&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please, give me some tips how to keep <code>&lt;div&gt;</code> vertically centred even if browsers are re-sized.</p>