将一叠 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*/
}

演示： http://jsfiddle.net/hno8bxty/

将一叠 div 的 CSS 居中

Center a stack of div's CSS

html

css

centering