display:flex;
justify-content: center;檢查側軸是否居中，比如古代豎着寫字，檢查字是否在每條竹簡的中央。
display:flex;
align-items: center;檢查橫軸是否居中，比如現代人是橫着寫字，檢查字是否寫在上下橫線的中間。
display:flex;
justify-content: center;
align-items: center;
兩者都加上就變成了居中的效果。
---------------------------------------------------------------------------------------------------------------
flex布局中align-items 和align-content的區別。align-items和align-content有相同的功能，不過不同點是它是用來讓每一個單行的容器居中而不是讓整個容器居中。align-content屬性只適用於多行的flex容器。有點難懂，關鍵詞：單行多行，看實例。
對於只有一行的flex元素，align-content是沒有效果的，如果改用align-items:center;則會達到預期的效果，如下圖
但如果變成多行容器 使用align-items時效果如下
使用align-content效果如下
