title: Align element horizontally and vertically to the center of the page
body: <p>It's been long time that I don't make a website and I can't remember how to align vertically a div in a proper way. I checked many online resources and also stackoverflow questions but nothing helped or at least I didn't see where my mistake is.</p>
  
  <p>I created a text that at the beginning is hidden and after some time appears and scales getting bigger using jQuery. It seems to work and it is centered horizontally but not vertically. How to align it vertically to the center of the page?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;link href="main.css" rel="stylesheet" /&gt;
  &lt;title&gt;Homepage&lt;/title&gt;
  &lt;script src="jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="container" align="center"&gt;
  &lt;p id="robo"&gt;ROBO&lt;/p&gt;
  &lt;/div&gt;
  &lt;script&gt;
  $(document).ready(function() {
      $("#robo").delay(500).fadeIn(500).animate({fontSize: "3em"}, 1000);
  }); 
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*{
      margin: 0px;
      padding: 0px;
  }
  body {
      text-align: center;
      width: 100%;
  }
  #container {
      width: 1024px;
      height: 768px;
      margin: 0 auto;
  }
  #robo {
    display:none;
    width:200px;
    height:200px;
  }
  </code></pre>
  
  <p><strong>JSFiddle Example</strong>: <a href="http://jsfiddle.net/sMrL9/" rel="nofollow">http://jsfiddle.net/sMrL9/</a></p>