如何让两个img在div居中

Question

如何让两个img在div中垂直居中 样式得怎么写

                                            </div>
                                            <div class="card-right">
                                                <!-- <div> -->
                                                    <span class="img-box"><img src="/Uploads/temp/test/pic1.jpg"></span>
                                                    <span class="img-box"><img src="/Uploads/temp/test/pic2.jpg"></span>
                                                <!-- </div> -->
                                            </div>

.img-box{

height: 45%;
width: 100%;
display: block;

}
.img-box>img{

width: 100%;
height: 100%;

}

Answer 1

为啥要用span去包img？
要实现垂直居中又很多方法，个人推荐用flex布局，类似这样：

//html
<div>
  <img/>
  <img/>
</div>
//css
 div{
  display:flex;
  align-item:center
}
div>img{
//自定义高度与宽度
}

如果要学flex布局，推荐阮一峰的。

Answer 2

img-box>img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 3

.img-box>img{
    vertiacl-align:middle;
}

Answer 4

.b{display:block;width:150px;height:200px;text-align:center;overflow:hidden;}
.for-vertical{display:inline-block;height:100%;vertical-align:middle;} 
.b img{vertical-align:middle;border:none;padding:0;} 
img{width:130px;}
.article{float:left;}

<div class="article">
        <a href="#" class="b"><span class="for-vertical"></span><img src="6.jpg" alt="马泡瓜" /></a>
    </div>
    <div class="article">
        <a href="#" class="b"><span class="for-vertical"></span><img src="hot.png" alt="马泡瓜" /></a>
    </div>
    <div class="article">
        <a href="#" class="b"><span class="for-vertical"></span><img src="2.jpg" alt="马泡瓜" /></a>
    </div>

兼容IE低版本