水平垂直居中深刻挖掘

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

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

嗯哼？也就是：

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

本文將討論 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;

 

居中單個元素

對於以下簡單的結構：

<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. 不會改變子元素的寬度

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

而 margin: auto 和 grid 則或多或少有一些小問題。absolute 沒法應付多個元素。

 

最後

本文知識點比較細，也代表 CSS 雖然簡單，可是不表明它容易。咱們平常工做中用到的不少屬性其實還有不少細節能夠挖掘深刻。

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

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。