在上篇文章 --一行 CSS 程式碼的魅力的最後，提到了兩種快速實現水平垂直居中的方式。

當然，CSS 中實現水平垂直居中的方式很多。別看到水平垂直居中就準備右上角 x 掉，本文的重點不是羅列有多少種方式實現水平垂直居中方式，而是探討一下常見的幾種水平垂直居中的方式的利弊。

嗯哼？也就是：

• 那麼多種水平垂直居中的方式，如果真的在業務中需要使用了，你腦海裡第一時間會想到哪個？
• 不同的水平垂直居中方式，它們肯定存在差異，那麼最顯著的不同是什麼？
• 有沒有所謂的最完美的水平垂直居中？

本文將討論 4 種水平垂直居中的方式，分別是，並且每個起個名字方面下面看圖：

1. absolute:position: absolute
   配合top:50%;left:50%;transform:translate(-50%, -50%)
2. aotubot:display:flex配合margin:auto
3. flex:display:flex配合align-items:center、justify-content:center
4. grid:display:grid配合place-content:center;

居中單個元素

對於如下簡單的結構：

<div class="g-container">
    <div class="sub"></div>
</div>

居中單個元素而言，上述 4 種方法都很好，沒有問題。

CodePen Demo -- Centering in CSS

居中多個元素

對於如下稍微複雜點的結構：

<div class="g-container">
    <div class="sub">1</div>
    <div class="sub">123</div>
    <div class="sub">123456</div>
</div>

那麼如果是居中多個子元素，上述 4 種方法，就能體現出明顯的不一樣。稍微也修改一下子元素，不給它設定寬度，通過 padding 撐開即可：

.sub {
    border: 1px solid deeppink;
    padding: 10px;
    border-radius: 5px;
}

看看結果如何：

CodePen Demo -- Centering in CSS 2

簡單分析分析：

1. absolute的方法明顯有問題，由於用的絕對定位，其實 3 個子元素都疊在了一起
2. flex和grid的方法，如果不手動新增邊距(margin 或者 gap)，會貼在一起
3. 不限制方向的話，flex 預設是水平排列，grid 是豎直排列
4. 非常重要的一點，grid佈局下的子元素的寬度，所以子元素的寬度會被強行拉伸至最寬的一個子元素的內容的寬度

對於多個子元素，absolute方法明顯不適用， 接下來主要看剩餘 3 個方法在一些細節上的差異。

控制間距

如果我們希望控制每個元素之間的間距呢？我們給autobot、flex、grid的容器各自加上gap: 5px，再看看：

.g-container{
    gap: 5px;
}

CodePen Demo -- Centering in CSS 3

1. margin: auto由於需要均分剩餘空間，所以表現並不好，無法按照我們設想的5px寬度進行間隔

讓元素多到溢位

OK，接下來，我們讓內容再多一點，多到溢位整個容器，看看有什麼不一樣。

再來一張豎直方向排列的：

CodePen Demo -- Centering in CSS 4

可以看到：

1. 非常重要的一點，由於沒有了剩餘空間，margin: auto已經無法做到均勻分配，水平垂直居中了，而是一邊貼著容器邊，另外一邊溢位
2. flex和grid都做到了即便超出容器空間，依然是水平垂直居中的

總結一下

經由上述幾個 DEMO 可以看出來，在目前比較常用的水平垂直居中方案當中。flex方案應該是目前而言最優的選擇，它能夠在各種環境下都保持內部元素的水平垂直居中並且不改變子元素的某些特徵：

1. 便捷的水平垂直居中單個元素
2. 便捷的水平垂直居中多個元素，無論是橫向、豎向，亦或內容超出
3. 非常方便控制子元素之間的間距
4. 不會改變子元素的寬度

當然，美中不足的是，可能相對而言，要敲多幾個字元。