将图像堆叠在一个居中、响应迅速的 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是方式，以及绝对定位。与今天一样，它与大多数浏览器兼容。

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

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

Answer 2

如果您没有兼容性问题，您可以随时使用 flexbox 解决方案。你可以看看这个网站，它有一些很好的例子http://www.sketchingwithcss.com/samplechapter/cheatsheet.htmlhttps://css-tricks.com/snippets/css/a-guide-to-flexbox/