div中的内容居中显示，包括水平和垂直2个方向。
<html>
<head>
<style type="text/css">
.box{
height:400px;
width:600px;
background-color: #f2dede;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="box">
<div style="background-color: #00a4e6">居中</div>
<div style="background-color: #00b33c">居中</div>
</div>
</body>
</html>说明：
align-items:center，控制垂直方向
justify-content:center，控制水平方向
弹性布局介绍：
Flex 弹性盒子布局是很强大的布局，它可以很方便的控制元素在垂直和水平方向上的行为。
使用display:flex
主轴和交叉轴
容器存在两个轴，水平叫主轴（Main-Axis），垂直叫交叉轴（Cross-Axis）。主轴左边是开始位置（main start）右边是结束位置（main end），交叉轴上是开始位置（cross start）下是结束位置（cross end）。用 justify 属性控制主轴项目的空隙，使用 align 属性控制交叉轴项目之间的垂直行为。
容器一共有 6 个属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content