我想先問一下你們能想到的實現垂直居中的方法有哪些？

1、line-height方式

2、Table布局

3、Inline-block方式

4、絕對定位之automargin

5、絕對定位之負margin

6、transform

7、額外div

8、Flex居中

我把他們分為了兩類，文本的垂直居中和塊級垂直居中

文本垂直居中：line-height方式、table布局

塊級垂直居中：絕對定位之automargin、絕對定位之負margin、額外div、inline-block方式、transform方式、flex居中

一、line-height方式

?

說明：

該方式只適用于情況比較簡單的單行文本，只需要簡單地把 line-height 設置為那個對象的 height 值就可以使文本居中了。這種方法在小元素上非常有用，例如使按鈕文本或者單行文本居中。

優缺點分析

優點：適用于所有瀏覽器 無足夠空間時不會被截斷；

缺點：只對文本有效(塊級元素無效)， 多行時，斷詞比較糟糕；

二、table布局

?

說明：

該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。

在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

display:table此元素會作為塊級表格來顯示 類似table標簽

display:table-cell 此元素會作為一個表格單元格顯示 類似td 和 th標簽

原理：

利用表布局特點，vertical-align設置為Middle后，單元格中內容中間與所在行中間對齊。

優缺點分析

優點：支持任意內容的可變高度、支持響應式，相對于line-height而言，可以兼容文字有多行的情況；

缺點：每一個需要垂直居中的元素都會需要加上額外標簽（需要table、table-cell兩個額外元素）

三、Inline-block

?

說明：將center元素display設置為inline-block，vertical-align設置為middle，為包含框設置after偽元素，將偽元素display設置為inline-block,vercial-align設置為middle，同時設置height為100%，撐開容器。

原理：為同一行的inline-block元素設置vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。

優缺點分析

優點：支持響應式、支持可變高度；

缺點：會加上額外標記；

?

四、絕對定位之automargin

?

說明：使用絕對定位要求元素必須設置明確高度。內容超過元素高度時需要設置overflow決定滾動條的出現

resize 屬性規定是否可由用戶調整元素的尺寸。

注釋：如果希望此屬性生效，需要設置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。

resize: none|both|horizontal|vertical;

優缺點分析

優點：支持響應式，并且在resize后仍然居中；

缺點：沒有顯式設置overflow時，內容超過元素高度時會溢出，沒有滾動條；

五、絕對定位之負margin

?

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

優缺點分析

優點：代碼量少、適用于所有瀏覽器、不需要嵌套標簽；

缺點：不支持響應式(不能使用百分比、min/max-width)；

六、Transform

?

這是最簡單的方法，不近能實現絕對居中同樣的效果，也支持聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的前綴，還要加上

top: 50%; left: 50%;

優點：

1.??????內容可變高度

2.??????代碼量少

缺點：

1.??????IE8不支持

2.??????屬性需要寫瀏覽器廠商前綴

3.??????可能干擾其他transform效果

4.??????某些情形下會出現文本或元素邊界渲染模糊的現象

七、額外div

?

說明：在需要居中的元素外插入一個div，設置外div的height為50%，margin-bottom為內部元素的一半（height+padding）/2。內容超過元素高度時需要設置overflow決定滾動條的出現。

優缺點分析

優點：瀏覽器兼容性好，支持舊版本ie；

缺點：需要額外元素、不支持響應式；

?

八、Flex居中

轉載于:https://www.cnblogs.com/1rui/p/5512212.html

總結

以上是生活随笔為你收集整理的垂直居中相关知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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