图片垂直居中

使用强制不换行 和before

注意img 行内元素时的空隙

<div class="demo">
  <div><img src="http://swipebox.csag.co/images/image-2.jpg" alt="">
  </div>
</div>

 

.demo {
width: 100%;
height: 100%;
background: #000;
position: absolute;
}
.demo>div {
height: 100%;
width: 100%;
line-height: 1px;
display: inline-block;
white-space: nowrap;
}
.demo>div:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px;
}
.demo img {
max-height: 100%;
max-width: 100%;

vertical-align: middle;

}

 

转载于:https://www.cnblogs.com/sameliu/p/3696568.html