CSS有哪些方式能夠實現垂直居中（方法大總結）

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【CSS有哪些方式能夠實現垂直居中（方法大總結）】

1.背景介紹

44年前咱們把人送上月球，但在CSS中咱們仍然不能很好的實現垂直居中。——@James Anderson

2.知識剖析

垂直居中就是豎向居中

接下來就講解在css中實現垂直居中的幾種方法：

一、單行文本垂直居中方法

說明：

該方式只適用於狀況比較簡單的單行文本，只須要簡單地把 line-height 設置爲那個對象的 height 值就能夠使文本居中了。

二、多行文本垂直居中方法

說明：

2.1父級元素display:table-cell，vertical-align:middle；

2.2使用table來佈局；

2.3多行內容居中，且容器高度可變，也很簡單，給出一致的 padding-bottom 和 padding-top ；

三、div垂直居中：table

說明：

在table標籤中，單元格框中的單元格內容是水平垂直居中的。

display:table此元素會做爲塊級表格來顯示 相似table標籤

display:table-cell 此元素會做爲一個表格單元格顯示 相似td 和 th標籤

四、div垂直居中：inline-block

說明：

給元素設置dispaly：inline-block配合vertical-align：middle來垂直居中

五、div垂直居中：絕對定位之margin：auto

說明：

父元素相對定位，子元素絕對定位。 子元素的上下左右均設置0定位且設置margin：auto

六、div垂直居中：絕對定位之負值法

說明：

已知元素高度後，使用絕對定位將top設置爲50%，mergin-top設置爲內容高度的一半(height + padding) / 2的負值；內容超過元素高度時須要設置overflow決定滾動條的出現；top：50%元素上邊界位於包含框中點，設置負外邊界使得元素垂直中心與包含框中心重合；

 

七、div垂直居中：絕對定位之translate

說明：

CSS3的興起，使得垂直居中有了更好的解決方法，就是使用transform代替上一種方法margin. transform中translate偏移的百分比值是相對於自身大小的

八、div垂直居中：flex

說明：

給父元素設置display：flex後再設置align-items: center表示讓子元素垂直居中；

 

3.常見問題

怎樣實現背景圖片垂直居中？

4.解決方案

父元素{

background-image: url("");

background-position: center center; //或者寫成50% 50%;

background-repeat: no-repeat;

}

5.編碼實戰

6.擴展思考

使用writing-mode實現垂直居中

取值：

vertical-rl：垂直方向自右而左的書寫方式。

vertical-lr：垂直方向自左而右的書寫方式。

7.參考文獻

參考：張鑫旭博客-垂直居中

8.更多討論

還有更多實現垂直居中的方法嗎？