两种优雅的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%的设备都可以支持。