做案例中，我們會發現讓子元素在父元素中垂直居中，要設置margin和padding等，各種設置才能垂直居中
現在可以使用CSS3中的align-items實現
align-items
定義子元素在父元素交叉軸上如何對齊的，大多數不理解交叉軸是什么，下面舉例來說明，不多說直接上代碼
現在是這樣顯示的，我需要讓子元素在父元素中垂直居中
1需要給父元素加display：flex;（不明白的可以先查下，后期會說明這個屬性的作用）
2.再給父元素(也就是box)加align-items:center;
效果如下
你會發現子元素已經在父元素垂直居中了，就是這么的easy
你可以把div的左上角看做交叉軸也就是X軸與Y軸的交叉點
當然align-items也有其他的屬性
flex-start 項目位於容器的開頭
flex-end 項目位於容器的結尾
center項目位於容器的中心
baseline 項目第一行文字的基線對齊
stretch如果子元素未設置或設置auto,將占滿整個容器的高度
flex-start 項目位於容器的開頭
上面說了可以把div的左上角看做交叉軸也就是X軸與Y軸的交叉點，那么這個交叉點也就是起點
效果：
那么就是以左上角對齊
flex-end 項目位於容器的結尾
效果：
說白了就是靠底部對齊
baseline 項目第一行文字的基線對齊
效果
stretch如果子元素未設置或設置auto,將占滿整個容器的高度
效果
我的子元素P標記未設置任何的高度，如果設置了該屬性，則會繼承父元素的高度
兼容性：
