給父級元素設定display：flex會使之轉成彈性盒模型，為我們提供了簡單方便的設定盒子水平垂直居中的方法。

1. 設定主軸（水平）方向居中
   justify-content : flex-start （預設值）主軸起始點位置對齊（水平方向左對齊）
   flex-end 主軸的結束位置（水平方向右對齊）
   center 居中對齊
   space-between 兩端對齊，專案之間的間隙相等
   space-around 專案之間的間隙比專案到邊框的間隙大一倍，與 space-between 的區別在於此方式兩端會有一定的空隙，而 space-between 專案是緊挨著邊框的
   

2. 設定交叉軸（垂直）上的對齊方式
   align-items： stretch （預設值） 當子元素盒子沒有設定高度或設定為auto時，垂直方向自適應，也就是高度會填充滿父元素
   flex-start 交叉軸起始點位置對齊
   flex-end 交叉軸的終點對齊
   center 交叉軸的中點對齊
   baseline 基於第一行文字的基線對齊
   

3. 多行沿交叉軸對齊（多行軸線的對齊方式）如果只有一根軸線，不起作用
   align-content : flex-start 與交叉軸的起點對齊
   flex-end 交叉軸的終點對齊
   center 交叉軸的中間對齊
   space-between 交叉軸兩端對齊，均勻分佈
   space-around 多行中行與行之間的上下距離是最上或最下一行距離上下邊框距離的一倍，也就是相當於上圖倒過來的效果

那麼如果想設定一個盒子垂直水平居中的話就可以給他的父級元素設定： display：flex
justify-context : center
align-item : center

關於子容器的操作方式目前只接觸了 設定子容器空間的分配方法flex，收藏了關於這些的一些文章，之後理解了繼續總結