垂直居中四种方式

1、单行文本：height 等于line-height

2、图片：vertical: align: middle; 注： 还能解决图片和文字一行的时候文字图片不对齐问题

3、display: flex; margin: auto;

4、absolute定位：top: 50%; left: 50%;transform: translate(-50%,-50%);

/* 垂直居中、绝对居中 */

.vertical-center {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -o-transform: translateY(-50%);

}