首先介紹一下flex布局。

采用Flex布局的元素，稱為Flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，成為flex項目（flex item），簡稱“項目”。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框 的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

利用flex實現元素水平垂直居中的兩種方法：

html如下：

<div class="father"><div class="son"></div> </div>

第一種方法（新方法）

父元素（容器）設置display屬性為flex，并設置水平主軸上的元素居中，垂直交叉軸上的元素居中。

*{margin: 0;padding: 0 } .father{width: 400px;height: 400px;border: 1px dashed black;display: flex;/*父元素設置flex屬性*/justify-content: center;/*水平主軸居中*/align-items: center;/*垂直交叉軸居中*/ } .son{width: 100px;height: 50px;background: pink; }

第二種方法（老方法）

父元素（容器）設置display為-webkit-box，并設置水平主軸上的元素居中，垂直交叉軸上的元素居中。

*{margin: 0;padding: 0 } .father{width: 400px;height: 400px;border: 1px dashed black;display: -webkit-box;-webkit-box-pack: center;-webkit-box-align: center } .son{width: 100px;height: 50px;background: pink; }

上述兩種方法效果是相同的，如下所示：

其實以上兩種方法都是在父元素中分三步來實現，不過個人認為，還是新方法更好記一點兒吧，建議使用第一種方法。

總結

以上是生活随笔為你收集整理的利用flex实现元素水平垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。