title: Center div inside absolute div
body: <p>see this link...: <a href="http://www.alsite.com.br/novo/varcare/" rel="nofollow" title="Exemple">Exemple</a></p>
  
  <p>on this site i have this code</p>
  
  <pre><code>    &lt;body&gt;
      &lt;div id="geral"&gt;
          &lt;div id="animacao"&gt;
              &lt;ul id="banners"&gt; 
                  &lt;li&gt;&lt;img src="banners/banner_1.jpg" alt="Banner 1" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="banners/banner_2.jpg" alt="Banner 2" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="menu"&gt;
  
          &lt;/div&gt;              
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>#geral</code> is positioned in the center of the screen - </p>
  
  <p><code>#animacao</code> has the same size of <code>#geral</code>, on this has animated images with fade effects..</p>
  
  <p><code>#menu</code> has 271px with and need to stay over and on center of <code>#geral</code> and <code>#animacao</code>, on this i will put the menu with PNG bakcground....</p>
  
  <p>This is my CSS, and probably doesn't work ...</p>
  
  <pre><code>#geral{
      position: absolute;
      width:990px;
      height:530px;
      top:50%;
      left:50%;
      margin-top:-265px;
      margin-left:-495px;
      background: url(../imagens/fundo.jpg) no-repeat;
  }
  
  #animacao{
      position: relative;
      width:990px;
      height:530px;
  }
  
  #menu
  {
      position: absolute;
      left: 50%;
      width:271px;
      height:530px;
      margin-left:-135px;
      background-color:yellow;
      z-index: 10;
  }
  </code></pre>
  
  <p>Where am I wrong?</p>
  
  <p><a href="http://jsfiddle.net/qmAN5/1/" rel="nofollow">Demo</a> </p>