在居中的响应式div中彼此堆叠图像

Question

我有以下代码。 进行设置以使图像响应（随窗口大小缩放）并在水平和垂直方向上居中放置。 一切正常，直到我想添加多张堆叠在一起的图像以进行幻灯片显示（淡入，淡出）。 我必须将img标签定位为“绝对”。 而且它显然使父div崩溃了。 基本上，我希望有一种替代方法可以在不使用绝对定位的情况下将图像堆叠在一起。

<div class="container">

            <div class="main-picture-wrapper">
                 <div class="main-picture">
                      <img id="front" src="img/VR-front.png" class="">
                      <img id="side" src="img/VR-side.png" class="">

                 </div>
             </div>
  </div>

 .container {
  height:100%;
  text-align: center;
  font:0/0 a;
    }

 .container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;    
}

.main-picture-wrapper {
    margin-top: 70px;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px/1;
    width:70%;
    left:0;      
}

.main-picture {
 width:100%;
 position: relative;
 text-align: center;
}

.main-picture img {
    position: absolute;
    width:100%;
    top: 0;
    left: 0;    

}

Answer 1

如果您没有兼容性问题，则可以始终使用flexbox解决方案。 您可以访问此网站，它提供了一些很好的示例http://www.sketchingwithcss.com/samplechapter/cheatsheet.html https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

正如k185所建议的那样， flexbox就是其中的一种，同时还有绝对定位 。 今天，它与大多数浏览器兼容 。

保留您的标记和样式，一个好的起点可能是这样的：

html, body {
  height: 100%;
}

.main-picture {
  ...
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-picture img {
  position: absolute;
}

https://jsbin.com/sinayiloge/edit?html,css,output