方法一：
对于包含图片的父级：
div{
position:relative;
}
对于图片本身：
img{
position:absolute;
margin:auto;
top:0;
buttom:0;
}
方法二：
对于包含图片的div:
div{
display:table-cell;
vertical-align:middle;
}
display:table-cell属性指让标签元素以表格单元格的形式呈现，使用display:table-cell与float:left或是position:absolute属性尽量不用同用，display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。IE6/7不支持此属性
同理使得多行文字垂直居中：
将文字用<span>包围，把多行文字看成图片。
span{
display:inline-block;//设置文字和图片一样的display;
}
对于包含span的div
div{
dispaly:table-cell;
vertical-align:middle;//垂直居中
text-align:center;//水平居中
}
方法三：
top:50%;先使图片上边缘平移到父级元素中线位置，然后translateY(-50%)又使图片向上移动自身高度一半的距离，刚好此时图片处于垂直居中的位置。
div{
position:relative;
}
img{
position:absolute;
top:50%;//垂直居中（使图片上边缘平移到父级元素中线位置）
left:50%;
transform:translate(-50%,-50%);//前一个参数和水平居中有关，后一个是垂直居中（使图片向上移动自身高度一半的距离）。
}
方法四：(移动端首选）
div{
display:flex;
align-items:center;//垂直居中
justify-content:center;//水平居中
}
方法五：
div{
display:flex;
}
img{
margin:auto;
}
弹性布局，首选移动端；