在上篇文章 -- 一行 CSS 代碼的魅力 的最后，提到了兩種快速實現(xiàn)水平垂直居中的方式。

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

嗯哼？也就是：

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

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

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

居中單個元素

對于如下簡單的結(jié)構(gòu)：

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

CodePen Demo -- Centering in CSS

居中多個元素

對于如下稍微復(fù)雜點的結(jié)構(gòu)：

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

看看結(jié)果如何：

CodePen Demo -- Centering in CSS 2

簡單分析分析：

1. absolute 的方法明顯有問題，由于用的絕對定位，其實 3 個子元素都疊在了一起
2. flex 和 grid 的方法，如果不手動添加邊距(margin 或者 gap)，會貼在一起
3. 不限制方向的話，flex 默認(rèn)是水平排列，grid 是豎直排列
4. 非常重要的一點，grid 布局下的子元素的寬度，所有子元素的寬度會被強行拉伸至最寬的一個子元素的內(nèi)容的寬度（也就是拉伸至網(wǎng)格寬度）

對于多個子元素，absolute 方法明顯不適用， 接下來主要看剩余 3 個方法在一些細(xì)節(jié)上的差異。

控制間距

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

CodePen Demo -- Centering in CSS 3

1. margin: auto 由于需要均分剩余空間，所以表現(xiàn)并不好，無法按照我們設(shè)想的 5px 寬度進(jìn)行間隔

讓元素多到溢出

OK，接下來，我們讓內(nèi)容再多一點，多到溢出整個容器，看看有什么不一樣。

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

CodePen Demo -- Centering in CSS 4

可以看到：

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

總結(jié)一下

經(jīng)由上述幾個 DEMO 可以看出來，在目前比較常用的水平垂直居中方案當(dāng)中。flex 方案應(yīng)該是目前而言最優(yōu)的選擇，它能夠在各種環(huán)境下都保持內(nèi)部元素的水平垂直居中并且不改變子元素的某些特征：

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

當(dāng)然，美中不足的是，可能相對而言，要敲多幾個字符。??

而 margin: auto 和 grid 則或多或少有一些小問題。absolute 無法應(yīng)付多個元素。

最后

本文知識點比較細(xì)，也表明 CSS 雖然簡單，但是不代表它容易。我們?nèi)粘９ぷ髦杏玫降暮芏鄬傩云鋵嵾€有很多細(xì)節(jié)可以挖掘深入。

譬如，可以再比較下在書寫方式 writing-mode 不同的場景下，上述水平垂直居中的方式的異同，等等。

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點個 star 訂閱收藏。

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。