使得图片垂直居中

方法一：

对于包含图片的父级：

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;

}

弹性布局，首选移动端；