三种垂直居中的方法

总结三种常用的垂直居中的方法
1.多个块级元素垂直居中，利用绝对定位以及transform，适用于不知道元素的宽度和高度。

.parent{ position:relative; }
.child{
    position:relative;
    top: 50%;
    transform: translateY(-50%);    /*CSS3的新属性*/
}

2、使用diplay：table-cell，其实这个就是把其变成表格样式，再利用表格的样式来进行居中，适用于未知元素高度的情况，也很方便。

.parent{
    display: table-cell;
    vertical-align: middle;
}

3、使用flex布局，现在主流浏览器已经都支持flex布局了，只不过需要给所要垂直居中的元素添加一个父div，给父div使用样式即可，挺方便的，这个兼容性也最好。

.parent{
    display: flex;
    align-items: center;    /*指定垂直居中*/
}

这个方法兼容性也很强。