在編寫一片網頁時，我們經常需要使一些文本或者圖片，盒子居中!但是在眾多的寫法里，那些才能使我們的目的最快，最有效的達到呢!
居中也是有軸線之分的，水平軸，垂直於水平軸的軸，交叉軸。
1盒子居中 margin：auto； 通常在這此行只有一個盒子的情況下使用[需要定寬-常規流和浮動不用]
2文本居中
定義水平軸線對齊方式
flex-start 項目位於在主軸起點
flex-end 項目位於主軸終點
center 項目在中間
space-between 兩端對齊，項目之間的間隔都相等（開頭和最后與父元素沒有間隔）
space-around 項目之間間隔相等，與父元素的邊距是間隔的一半
space-evenly 項目與父元素的間距是一樣的
定義屬性在交叉軸如何對齊 align-items
align-items：flex-start 交叉軸起點對齊
align-items：flex-end 交叉軸終點對齊
align-items:center 交叉軸中點對齊
align-items：baseline 項目第一行文字基線對齊
align-items：stretch 項目未設置高度或者設置為auto，將占滿整個容器高度
定義多根軸線對齊方式 align-content多行的時候用
align-content:flex-start 交叉軸起點對齊
align-content:flex-end 交叉軸終點對齊
align-content:center 交叉軸中點對齊
align-content:space-around 間距相等；軸之間的間距比邊框間距大一倍
align-content:space-between 交叉軸兩端對齊，軸間距平均分布
水平居中
定寬 margin：auto （常規流和彈性項目【不用定寬】）
彈性盒設置justify-content:center 讓彈性項目在主軸上居中
父元素設置text-align:center 讓內部行盒和塊盒居中
相對定位元素 margin-left:50%; transform：translateX(-50%) margin是項目的寬度【終極】
垂直居中
單行文本垂直居中 line-height 為項目的高度
彈性盒 align-items:center 讓項目在垂直軸居中
相對定位元素 top：50%；transform：translateY（-50%）【終極】
相對定位元素垂直居中
left：50%；top：50%；transform：translate（-50%，-50%）