title: How to display a div at the center of viewport?
body: <p>I am trying to position a <code>div</code> at the center of viewport.</p>
  
  <p>Here's what I did so far.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;TEST&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;Some header stuff here.&lt;/div&gt;
          &lt;div id="wrapper"&gt;
              &lt;div class="spacer"&gt;&lt;!-- avoid overlapping of content by header --&gt;&lt;/div&gt;
              &lt;div id="content"&gt;Stuff to be centered horizontally and vertically.&lt;/div&gt;
              &lt;div footer="spacer"&gt;&lt;!-- avoid overlapping of content by footer --&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;Some footer.&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body{
      height:100%; /*Setting height to 100% in order to make min-height:100% to work on wrapper.*/
  }
  #header{
      height:70px;
      width:100%;
      position:fixed;
      top:0;
      left:0;
  }
  #wrapper{
      min-height:100%;
      width:100%;
      margin-bottom:-70px; /*Equal to footer's height*/
  }
  #content{
      /* Exact height is not known.*/
      width:250px;
      position:absolute;
      top:50%;
      left:50%;
      margin:0px 0px 0px -125px; /* Top margin?? */
  }
  #footer{
      height:70px;
      width:100%;
      position:relative;
      bottom:0;
  }
  div.spacer{
      height:70px;
  }
  </code></pre>
  
  <p>Now I have two problems.</p>
  
  <ol>
  <li><p>Since height is unknown, how to position the <code>div#content</code> to exact center because I can't set a negative <code>margin-top</code>.</p></li>
  <li><p>Even if the height of <code>#content</code> was known and setting <code>margin-top</code> could have worked, the method will fail as soon as the viewport's height is less than that of <code>div#content</code>'s since header and footer will overlap <code>#content</code>.</p></li>
  </ol>
  
  <p>How to fix this?</p>