Flexbox实现垂直水平居中

Flexbox(伸缩盒)是CSS3中新增的特性，利用这个属性能够解决页面中的居中问题。只须要3行代码就能够实现，不须要设置元素的尺寸，可以自适应页面。

这个方法只能在现代浏览器上有效，IE10+、chrome、Safari、Firefox。例如：

HTML：

首先，建立一个div容器，容器内是须要居中的内容

<div class="container">
    <!--容器内的元素将会居中-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

3行CSS代码：

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

note：

1.设置container的display的类型为flex，激活为flexbox模式。

2.justify-content定义水平方向的元素位置

3.align-items定义垂直方向的元素位置

搞定。。。

 

更多阅读：

flexbox彻底指南

Using_CSS_flexible_boxes

Flexbox in 5 minutes

The Simplest Way To Center Elements Vertically And Horizontally