title: Keeping a DIV at bottom-center of its parent DIV
body: <p>My HTML structure is basically this - </p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Ignore any elements except <code>&lt;div id="header"&gt;</code>
  I want to align <code>&lt;div class="container"&gt;</code> inside <code>&lt;div id="header"&gt;</code> at exactly bottom center. I'm using the following CSS code-</p>
  
  <pre><code>#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
  #header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
  </code></pre>
  
  <p>There are height differences between the parent (#header) and child (#header .container) DIVs. Removing <code>position:absolute;</code> from the child centers it but it sticks to the parent's top instead of bottom.  Keeping <code>position:absolute;</code> sticks it at the bottom but aligns it to the left.</p>
  
  <p>How do I align it both <strong>center</strong> AND <strong>bottom</strong> at the same time?</p>