title: Why 'top: 50%' doesn't work?
body: <p>I want the loading animation in the center of the page. This is the style of the <code>&lt;div id="loading"&gt;</code></p>
  
  <pre class="lang-css prettyprint-override"><code>#loading{
      position: absolute;
      top: 50%;
      left: 50%;
  }
  </code></pre>
  
  <p>But it isn't in the center and I don't know why. <a href="http://jsfiddle.net/ahmadalli/skq7Y/" rel="nofollow">This</a> is the loading's jsfiddle page. Can anybody help me?</p>