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 就是这种方式，还有绝对定位。今天是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

在一个居中的响应div中将图像堆叠在一起

2 个答案: