如何让子元素在父元素中上下左右居中？
经过在“逆战班”的学习我们已经掌握了三种方法：
1. 定位 + 拉取 (子元素固定大小)
2. margin:auto + position的上下左右0
3. 定位 + 位移50%
这周的学习又让我们学习到了第四种方案来解决这个问题，利用flex布局（弹性布局）来实现子元素在父元素中的上下左右居中。
首先要了解flex语句，在了解语句后，就可以利用他们来解决问题。
首先要给父元素设置：
1、display : flex;表示其内部的子元素具有弹性空间
2、flex-direction: row; 布局的排列方向 （主轴排列方向）
row： 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse： 显示为行。但方向和row属性值是反的
column： 显示为列
column-reverse： 显示为列。但方向和column属性值是反的
3、justify-content ; 属性决定了主轴方向上子项的对齐和分布方式。
flex-start ： 子项都去起始位置对齐。
flex-end ： 子项都去结束位置对齐。
center ： 子项都去中心位置对齐。
space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around : around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
如果主轴为row,那么在主轴方向上（即水平方向上）居中对齐，可为父元素设置：
justify-content: center;
4、align-items : 每一行中的子元素上下对齐方式。
flex-start; 子项都去起始位置对齐
center; 子项都去中心位置对齐
flex-end; 子项都去结束位置对齐
如果主轴为row,那么在垂直主轴方向上（即垂直方向上）居中对齐，可为父元素设置：
align-items: center;
下面进行简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#father{width: 300px;height: 300px;background-color: blue;margin: 30px auto;
display: flex;}
#father div{width: 100px;height: 100px;background-color: red;
}
</style>
</head>
<body>
<div id="father">
<div></div>
</div>
</body>
</html>
此时为仅为父元素设置display: flex;样式。
为父元素添加居中样式：
#father{width: 300px;height: 300px;background-color: blue;margin: 30px auto;
display: flex;
justify-content: center;align-items: center;}
效果如下：
子元素已在父元素中居中。