title: Positioning <div> element at center of screen
body: <p>I want to position a <code>&lt;div&gt;</code> (or a <code>&lt;table&gt;</code>) element at the center of the screen irrespective of screen size. In other words, the space left on 'top' and 'bottom' should be equal and space left on 'right' and 'left' sides should be equal. I would like to accomplish this with only CSS.</p>
  
  <p>I have tried the following but it is not working:</p>
  
  <pre><code> &lt;body&gt;
    &lt;div style="top:0px; border:1px solid red;"&gt;
      &lt;table border="1" align="center"&gt;
       &lt;tr height="100%"&gt;
        &lt;td height="100%" width="100%" valign="middle" align="center"&gt;
          We are launching soon!
        &lt;/td&gt;
       &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p><strong>Note:</strong><br>
  It is either way fine if the <code>&lt;div&gt;</code> element (or <code>&lt;table&gt;</code>) scrolls with the website or not. Just want it to be centered when the page loads. </p>