flex容器内子元素的float、clear和vertical-align属性将失效，所有子元素自动成为容器成员flex item，即“项目”。
水平居中
justify-content属性定义了项目在主轴（水平）上的对齐方式。
justify-content可取值：
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等（类似margin-left = margin-right）。所以，项目之间的间隔比项目与边框的间隔大一倍。
1. 单个元素水平居中
//css.box{display:flex;justify-content:center;background:#0099cc}h1{color:#FFF}//html<div class="box"><h1>flex弹性布局justify-content属性实现元素水平居中</h1></div>
不需要对目标元素设置任何样式，如：width，margin。
2. 多个元素水平居中
//css.box{display:flex;justify-content:center;width:100%;background:#0099cc}h1{font-size:1rem;padding:1rem;border:1px dashed#FFF;color:#FFF;font-weight:normal;}//html<div class="box"><h1>flex弹性布局justify-content属性实现元素水平居中</h1><h1>flex弹性布局justify-content属性实现元素水平居中</h1><h1>flex弹性布局justify-content属性实现元素水平居中</h1></div>
元素垂直居中
align-items属性定义项目在交叉轴（垂直）上如何对齐。
align-items可取值：
flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。
1. 单个元素垂直居中
//css.box{display:flex;width:980px;height:30rem;align-items:center;background:#0099cc}h1{font-size:1rem;padding:1rem;border:1px dashed#FFF;color:#FFF}//html<div class="box"><h1>flex弹性布局align-items属性实现垂直居中</h1></div>
2. 多个元素并排垂直居中
//css.box{ display:flex; width:980px; height:30rem;align-items:center; background:#0099cc}h1{font-size:1rem; padding:1rem; border:1px dashed #FFF; color:#FFF}//html<div class="box"><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1></div>
如果想父元素水平居中，你只需要给body标签一个属性就OK了。代码如下：
body{display:flex;justify-content:center;}
3. 多行元素垂直居中
//cssbody{display:flex;justify-content:center}.box{display:flex;width:980px;height:30rem;justify-content:center;background:#0099cc;flex-direction:column;align-items:center;}h1{display:flex;justify-content:center;font-size:1rem;padding:1rem;border:1px dashed #FFF;color:#FFF;width:28rem}//html<div class="box"><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1><h1>flex弹性布局align-items属性实现垂直居中</h1></div>
由于弹性容器.box添加了display:flex;属性，子项目默认是水平排列的，所以给.box追加一个flex-direction:column属性来让子项目垂直排列。此时垂直方向作为主轴，所以我们可以使用justify-content:center来让所有子项目在垂直方向上居中。
