如何讓子元素在父元素中上下左右居中？
經過在“逆戰班”的學習我們已經掌握了三種方法：
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;}
效果如下：
子元素已在父元素中居中。