html - 将图像堆叠在一个居中的响应式 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

正如 k185 所建议的那样，flexbox 与绝对定位 一起使用。今天是compatible with most of browsers .

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

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