在前端開發中，通過CSS實現佈局容器的居中，也有諸多方法方式，當然也是CSS面試題中的經典面試題，在本文章中會系統的分析綜述 通過 Flexbox 佈局模塊 與 CSS Grid佈局模 實現容器的居中效果。

在傳統解決方案，基於盒狀模型，依賴 display屬性 + position屬性 + float屬性來實現基本佈局，包括本文章的居中排列。

本文章首發於微信公眾號（biglead） 我的大前端生涯 ，同步刊登各技術論壇。

1 Flexbox中實現水平垂直居中

1.1 Flexible Box 的簡述

在2009年，W3C提出出的 Flex 佈局方案，Flex是Flexible Box的縮寫，可意為”彈性佈局”，任何一個容器都可以指定為Flex佈局，可用來為盒狀模型提供最大的靈活性。

採用Flex佈局的元素，稱為Flex容器（flex container），以下稱為 Flexbox ，Flex容器中的所有子元素稱為Flex項目（flex item）。

任何一個容器都可以指定為Flex佈局，如下所示：

.box{
  display: flex;
}

或者是

.box{
  display: inline-flex;
}

可點擊這裏查看 CSS中flex和inline-flex的區別

Flexbox 默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end，如下圖所示：

1.2 Flexible Box 中子 Item的居中對齊

在Flexbox佈局模塊中，使其子 Item (flex item) 居中對齊（水平方向與豎直方向全部居中），如下圖 1-1 所示效果：

1.2.1 實現方式一 只設置 Flex容器的屬性

如圖 1-1 中所示的效果，只需要在Flex容器上設置justify-content、align-items的值為center時，可以讓元素在Flex容器中達到水平垂直居中的效果，如下代碼清單1-2所示：

/*代碼清單1-2*/
<div class="flex__container">
  <div class="flex__item"></div>
</div>

    /*Flex 容器*/
    .flex__container {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 300px;
      height: 300px;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

justify-content 用來設置水平居中，如下圖1-3所示：

align-items 用來限制豎直居中，如下圖1-4所示：

如下圖1-2中所示，將Flex容器中的子Item增加為 4 個，此種方法設置的居中效果依然有效果。

圖 1-2 中對應的 代碼如下：

/*代碼清單1-3*/
<div class="flex__container">
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

    /*Flex 容器*/
    .flex__container {
      display: flex;
      justify-content: center;
      align-items: center;

      /*flex-direction: column;*/
      /*display: inline-flex;*/

      width: 300px;
      height: 300px;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;
      margin-left: 10px;
      margin-top: 10px;
      background-color: aqua;
    }

1.2.2 實現方式 二 同時設置 Flex容器屬性與其子Item的屬性

    /*Flex 容器*/
    .flex__container {
      display: flex;
      justify-content: center;
    }

    /*Flex 子 Item */
    .flex__item {
      align-self: center;
    }

對應的 Html 層級代碼如下：

<div class="flex__container">
  
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  
</div>

1.2.3 Flex容器中子 Item 設置margin: auto

如果在Flex容器中只有一個 子 Item ，可以在 Item中顯式的設置margin的值為auto，也可以實現水平垂直居中效果，如下圖1-5所示：

2 Grid 佈局中實現水平垂直居中

Css 中的 Grid 佈局可稱為 CSS Grid Layout Module ，是CSS為佈局新增的一個模塊，簡單的理解為 Grid 佈局，是一個網絡佈局，任何一個容器都可以指定為 Grid 佈局，如下所示：

.box{
 /*或者 inline-grid */
  display: grid;
}

在 Grid 佈局中，實現其子 Item的垂直水平居中效果可直接 配置 place-items 為 center ，如下圖 1-6所示：

    /*Grid 容器*/
    .flex__container {
      /*或者 inline-grid */
      display: grid;
      place-items: center;
    }

完畢