三種垂直居中的方法

總結三種常用的垂直居中的方法

1.多個塊級元素垂直居中，利用絕對定位以及transform，适用于不知道元素的寬度和高度。

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

2、使用diplay：table-cell，其實這個就是把其變成表格樣式，再利用表格的樣式來進行居中，适用于未知元素高度的情況，也很友善。

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

3、使用flex布局，現在主流浏覽器已經都支援flex布局了，隻不過需要給所要垂直居中的元素添加一個父div，給父div使用樣式即可，挺友善的，這個相容性也最好。

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

這個方法相容性也很強。