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

1、line-height方式

2、Table布局

3、Inline-block方式

4、絕對定位之a(chǎn)utomargin

5、絕對定位之負margin

6、transform

7、額外div

8、Flex居中

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

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

塊級垂直居中：絕對定位之a(chǎn)utomargin、絕對定位之負margin、額外div、inline-block方式、transform方式、flex居中

一、line-height方式

?

說明：

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

優(yōu)缺點分析

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

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

二、table布局

?

說明：

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

在表單元格中，這個屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。

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

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

原理：

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

優(yōu)缺點分析

優(yōu)點：支持任意內(nèi)容的可變高度、支持響應(yīng)式，相對于line-height而言，可以兼容文字有多行的情況；

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

三、Inline-block

?

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

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

優(yōu)缺點分析

優(yōu)點：支持響應(yīng)式、支持可變高度；

缺點：會加上額外標記；

?

四、絕對定位之a(chǎn)utomargin

?

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

resize 屬性規(guī)定是否可由用戶調(diào)整元素的尺寸。

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

resize: none|both|horizontal|vertical;

優(yōu)缺點分析

優(yōu)點：支持響應(yīng)式，并且在resize后仍然居中；

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

五、絕對定位之負margin

?

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

優(yōu)缺點分析

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

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

六、Transform

?

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

top: 50%; left: 50%;

優(yōu)點：

1.??????內(nèi)容可變高度

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

缺點：

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

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

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

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

七、額外div

?

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

優(yōu)缺點分析

優(yōu)點：瀏覽器兼容性好，支持舊版本ie；

缺點：需要額外元素、不支持響應(yīng)式；

?

八、Flex居中

轉(zhuǎn)載于:https://www.cnblogs.com/1rui/p/5512212.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。