将一堆div的CSS居中

Question

我正在尝试将div堆叠在div之上，并在页面中水平居中这两个div。

.sandBox{
  position:relative;
}
.product-image, .option-image{
  position:absolute;
  margin-left:auto;
  margin-right:auto;
}
.product-image{
  z-index:-1;
}

<div class="sandBox">
  <div class="product-image">
    <img src="main-product-image.jpg" width="1440" height="560" alt=""/>
  </div>

  <div class="option-image">
    <img src="overlay.png" width="1440" height="560" alt=""/>
  </div>
</div>

这个堆叠部分工作正常，但我似乎无法让它们集中在我的尝试中。

Answer 1

这应该使它们居中。

.product-image, .option-image{
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    left: 0; /*NEW*/
    right: 0; /*NEW*/
}

DEMO： http://jsfiddle.net/hno8bxty/