兩種優雅的CSS3垂直居中方法

摘要

面向現代瀏覽器，CSS3已經提供了很好的方法實現垂直居中，本文介紹了其中兩種經常使用的方法，無需藉助額外的html結構或js代碼，純CSS3實現垂直居中，而且在國內90%的設備上均可以兼容。

方法一：transform

<div class="container">
    <div class="center">本元素相對於父元素垂直居中</div>
</div>

.container{
    position: relative;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

點我查看demo-1

看起來至關容易理解，就是先把元素下移父元素高度的50%，而後再上移自身高度的50%。
嚴謹地來說，這方法還同時實現了水平居中，不須要的話把left: 50%去掉，並改爲transform: translateY(-50%)

transform瀏覽器兼容性

從上圖可見，國內大約90%的設備均可以支持。

方法二：flex佈局

對須要垂直居中的元素的父元素增長一個class，

.container{
    display: flex;
    align-items: center;
}

點我查看demo-2

flex佈局可作的太多了，單純作垂直居中真的大材小用。

flex佈局瀏覽器兼容性

從上圖可見，國內大約90%的設備均可以支持。