title: Center a stack of div's CSS
body: <p>I am trying to stack a <code>div</code> on top of a <code>div</code> and center those two <code>div</code>s horizontally in the page.</p>
  
  <pre class="lang-css prettyprint-override"><code>.sandBox{
    position:relative;
  }
  .product-image, .option-image{
    position:absolute;
    margin-left:auto;
    margin-right:auto;
  }
  .product-image{
    z-index:-1;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="sandBox"&gt;
    &lt;div class="product-image"&gt;
      &lt;img src="main-product-image.jpg" width="1440" height="560" alt=""/&gt;
    &lt;/div&gt;
  
    &lt;div class="option-image"&gt;
      &lt;img src="overlay.png" width="1440" height="560" alt=""/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This stack part works fine but I can not seem to get them centered no mater what I try.</p>