div中的内容居中显示，包括水平和垂直2个方向。
居中
居中
说明：
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