一、CSS 垂直居中

1、父元素display:table-cell;vertical-align:center，里面的子元素就會實現垂直居中，不需要知道子元素的寬高

/* HTML */復制代碼

• 效果展示

---

2、absolute+margin:auto，定位為 absolute 的元素垂直居中，不需要知道該元素的寬高

復制代碼

• 效果展示

---

3、absolute+負margin，定位為 absolute 的元素垂直居中，需要知道該元素的寬高

復制代碼

• 效果展示

4、absolute+calc(css3計算屬性)，定位為 absolute 的元素垂直居中，需要知道該元素的寬高

復制代碼

• 效果展示

5、absolute+transform，定位為 absolute 的元素垂直居中，不需要知道元素的寬高

復制代碼

• 效果展示

6、line-height，父元素：line-height=height。子元素：display:inline-block。子元素垂直居中，不需要知道子元素的寬高

復制代碼

• 效果展示

7、flex，目前主流的布局方案，父元素為 flex 容器且添加 align-items: center，控制子元素的布局。不需要知道子元素的寬高

復制代碼

• 效果展示

8、grid ，目前最強大的布局方案，使用還尚未流行。父元素為 grid，子元素添加 align-self: center。不需要知道子元素的寬高

復制代碼

• 效果展示

9、偽元素after或before，這是我搜出來整理的。CSS 真的太神(s)奇(d)了，毫無道理。子元素垂直居中不需要知道寬高

復制代碼

• 效果展示

10、隱藏節點(盒子)實現 該原理就是使用盒子占位置，但不顯示出該盒子。另外的盒子垂直居中，子盒子的寬高需由實際計算時確定

復制代碼

• 效果展示

11、writing-mode，這是搜索整理而來，參考資料見最后。子元素盒子 display: inline-block。子元素垂直居中，不需要知道該盒子的寬高

復制代碼

• 效果展示

三、參考資料

作者：soloplayer
鏈接：https://juejin.cn/post/6904138129612439560
來源：掘金

總結

以上是生活随笔為你收集整理的table居中显示_「CSS三种居中方案全解」CSS垂直居中常用方法集结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。