如何利用flex布局多行多個div水平垂直置中

水平垂直一直是一個經典的問題，最近寫一個頁面樣式的時候遇到了這個問題，這次需要水平垂直置中的是多行多個p區塊，代碼如下：

<p class="content" >    <p class="chart"></p>   <p class="chart"></p>   <p class="chart"></p>   <p class="chart"></p>   <p class="chart"></p>   <p class="chart"></p> </p>

這次採用的是flex布局，因為採用flex布局的話瀏覽器都會幫我們計算好，在這裡父元素需要進行flex布局，flex布局下會有一條主軸和垂直的交叉軸，主軸預設是水平方向的，交叉軸預設就垂直方向的，可以通過flex-direction屬性去改變，具體的flex布局可參考阮一峰老師的教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlcss

CSS代碼如下：

.content {    display: flex;    flex-wrap: wrap;    align-items: center;    width: 100%;    height: 100%;  }

flex-wrap屬性是指flex布局下的元素是否需要換行，該屬性一共可取三個值，分別是nowrap，wrap，wrap-reverse。預設值是nowwrap（不換行），wrap指子項目換行，並且第一行在上面，wrap-reverse指子項目換行，第一行在下面。

align-items屬性定義項目在交叉軸上如何對齊，在這裡交叉軸的預設方向是垂直方向，我們選擇的值center，也就是與交叉軸的中點對齊，該屬性共有以下幾個值：

flex-start：交叉軸的起點對齊。flex-end：交叉軸的終點對齊。center：交叉軸的中點對齊。baseline: 項目的第一行文字的基準對齊。stretch（預設值）：如果項目未設定高度或設為auto，將佔滿整個容器的高度。

這樣我們達到了垂直置中的目的，還需要水平置中。

需要垂直置中的子項目的樣式代碼如下：

.chart {      display: inline-block;      width: 30%;    height: 40%;     margin: 0 auto;     border: 1px solid #000;   }

display: inline-block為了讓p同一行顯示，在這裡的寬度和高度決定了一行可以顯示多少個p區塊。

margin: 0 auto就是為了讓子項目水平置中，auto就是自動的意思，瀏覽器會協助我們進行計算，這樣我們就達到了水平垂直置中了。