1、flex布局：
html:
<div class="flexbox">
<img src="1.jpg" alt="">
</div>
css:
.flexbox{
width: 300px;
height: 250px;
display: flex;
align-items: center;
}
.flexbox img{
width: 100px;
height: 100px;
align-items: center;
}
解释：
（1）、为了用flex实现垂直居中，我们首先要创建一个包裹着图片的div元素，然后给它定义一些基础属性。
（2）、div元素的display属性设置为flex。
（3）、div添加另外一条属性align-items: center;
2、
div:
display: table-cell;
img:
vertical-align: middle;
（1）、首先我们先要创建一个div元素以及另外一个包含图片的div元素，然后我们开始设置它的样式。
（2）、给img父元素设置display属性为table
（3）、把包裹图片的那个div元素的display属性设置为table-cell
（4）、为了实现垂直居中，我们现在要做的就是给包裹图片的div元素设置vertical-align: middle;属性；
//图片垂直居中, display:table-cell; vertical-align:middle; 不能和 css (float)元素共存,可以在元素外面多加一个层
