title: How to Center div AND place at bottom of another div
body: <p>In all the posts I've been able to find a deal with either centering a div inside another div or putting a div at the bottom of another div, and the advice has been great but I haven't been able to find anything to do both.</p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;body style="text-align:center; margin:0; padding:0;"&gt;
    &lt;div style="width:100%; height:100px; background-image:url(header.png);position:relative;"&gt;
      &lt;div&gt;
        &lt;div style="height:75px; width:950px; background-image:url(formtop.png); bottom:0; position: absolute; margin-left:auto; margin-right:auto;"&gt;
          &lt;div style="float:left; position:relative; left:30px; top:15px"&gt;
            &lt;img src="logo.png" width="88" height="38"&gt;
          &lt;/div&gt;
          &lt;div style="margin-top:15px"&gt;
            &lt;h1&gt;Product Form&lt;/h1&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>All I want to do is to put the <code>formtop.png</code> div at the bottom and center of the containing div. I can do one or the other but I can't do both. If I change <code>position:absolute</code> to <code>position:relative</code> then the image centers itself but its too high. When I change it back to absolute then it sits nicely at the bottom of its containing div but in IE it's way off the right and in firefox it's at the left side of the page.</p>
  
  <p>Any advice?</p>