网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。

元素居中，相信作为前端工程师的你肯定会经常用到，不管是在水平方向居中，还是垂直方向居中，都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中，还是比较麻烦的。不过你也不用担心，下面就给大家分享下通过Flex布局轻松实现元素在水平、垂直方向上的居中效果。

水平居中

水平居中最为简单我们直接来看下代码

1.单个元素水平居中

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

CSS代码

1

.box{

2

display: flex;

3

justify-content:center;

4

background:#0099cc

5

}

6

h1{

7

color:#FFF

8

}

HTML代码

1

2

flex弹性布局justify-content属性实现元素水平居中

3