在上篇文章 -- 一行 CSS 代碼的魅力 的最后，提到了兩種快速實作水平垂直居中的方式，
當然，CSS 中實作水平垂直居中的方式很多，別看到水平垂直居中就準備右上角 x 掉，本文的重點不是羅列有多少種方式實作水平垂直居中方式，而是探討一下常見的幾種水平垂直居中的方式的利弊，
嗯哼？也就是：
- 那么多種水平垂直居中的方式，如果真的在業務中需要使用了，你腦海里第一時間會想到哪個？
- 不同的水平垂直居中方式，它們肯定存在差異，那么最顯著的不同是什么？
- 有沒有所謂的最完美的水平垂直居中？
本文將討論 4 種水平垂直居中的方式，分別是，并且每個起個名字方面下面看圖：
- absolute:
position: absolute配合top:50%;left:50%;transform:translate(-50%, -50%) - autobot:
display:flex配合margin:auto - flex:
display:flex配合align-items:center、justify-content:center - grid:
display:grid配合place-content:center;
居中單個元素
對于如下簡單的結構：
<div >
<div ></div>
</div>
居中單個元素而言，上述 4 種方法都很好，沒有問題，
CodePen Demo -- Centering in CSS
居中多個元素
對于如下稍微復雜點的結構：
<div >
<div >1</div>
<div >123</div>
<div >123456</div>
</div>
那么如果是居中多個子元素，上述 4 種方法，就能體現出明顯的不一樣，稍微也修改一下子元素，不給它設定寬度，通過 padding 撐開即可：
.sub {
border: 1px solid deeppink;
padding: 10px;
border-radius: 5px;
}
看看結果如何：
CodePen Demo -- Centering in CSS 2
簡單分析分析：
absolute的方法明顯有問題，由于用的絕對定位，其實 3 個子元素都疊在了一起flex和grid的方法，如果不手動添加邊距(margin 或者 gap)，會貼在一起- 不限制方向的話，flex 默認是水平排列，grid 是豎直排列
- 非常重要的一點，
grid布局下的子元素的寬度，所有子元素的寬度會被強行拉伸至最寬的一個子元素的內容的寬度（也就是拉伸至網格寬度）
對于多個子元素，absolute 方法明顯不適用， 接下來主要看剩余 3 個方法在一些細節上的差異，
控制間距
如果我們希望控制每個元素之間的間距呢？我們給 autobot、flex、grid 的容器各自加上 gap: 5px，再看看：
.g-container{
gap: 5px;
}
CodePen Demo -- Centering in CSS 3
margin: auto由于需要均分剩余空間，所以表現并不好，無法按照我們設想的5px寬度進行間隔
讓元素多到溢位
OK，接下來，我們讓內容再多一點，多到溢位整個容器，看看有什么不一樣，
再來一張豎直方向排列的：
CodePen Demo -- Centering in CSS 4
可以看到：
- 非常重要的一點，由于沒有了剩余空間，
margin: auto已經無法做到均勻分配，水平垂直居中了，而是一邊貼著容器邊，另外一邊溢位 flex和grid都做到了即便超出容器空間，依然是水平垂直居中的
總結一下
經由上述幾個 DEMO 可以看出來，在目前比較常用的水平垂直居中方案當中，flex 方案應該是目前而言最優的選擇，它能夠在各種環境下都保持內部元素的水平垂直居中并且不改變子元素的某些特征：
- 便捷的水平垂直居中單個元素
- 便捷的水平垂直居中多個元素，無論是橫向、豎向，亦或內容超出
- 非常方便控制子元素之間的間距
- 不會改變子元素的寬度
當然，美中不足的是，可能相對而言，要敲多幾個字符，??
而 margin: auto 和 grid 則或多或少有一些小問題，absolute 無法應付多個元素，
最后
本文知識點比較細，也表明 CSS 雖然簡單，但是不代表它容易，我們日常作業中用到的很多屬性其實還有很多細節可以挖掘深入，
譬如，可以再比較下在書寫方式 writing-mode 不同的場景下，上述水平垂直居中的方式的異同，等等，
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/246472.html
標籤：Html/Css
上一篇：layui城市三級聯動(fesiong / layarea)
下一篇：z-index的特點