兩種方法實現CSS垂直居中

2021-07-15 21:01:01 字數 905 閱讀 1128

方法一  :利用行高line-height

line-height通常是用於調節一段文字的行與行之間的距離,或者說兩行文字之間的距離,如果外部容器高度是100px;設定line-height:100px;可以實現垂直居中。但是用它來實現垂直居中,也是有缺點的,就是如果內容過多,文字就會跑到下一行,那麼內容就不可能垂直居中了。以下主要講一下文字過多怎樣實現垂直居中。

方法二:利用絕對定位

這個方法有個缺點我必須指出,就是外面的塊狀元素,必須指定高度,所以如果你在裡面放動態的內容的話,後果會很糟糕。

html**

abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. acsi et fere similisusingaugueabsolutevalidus. regulapositioningeu jus vel, indoles fere iaceo ea similis. velit praemitto nulla vel luctus secundum.

css**:

這種用絕對定位來實現的垂直居中,取決與元素的寬度和高度,你可以用下面這兩個公式來計算元素的左邊距和上邊距

元素的寬度/2 = 負左邊距

元素的高度/2 = 負上邊距

.vert
完整的css**:

body 

h1 h1 span

p strong

.vert

css實現div水平,垂直居中 兩種方法

div的垂直水平居中應該是很常見的問題了,網上的方法也很多 總之就是要實現下圖這個效果 我們慢慢來,先看看實現這個效果真正的難點 坑 在 先不說具體的實現,很多人應該都熟悉margin 0 auto這個 標配 吧?這是讓div的上下margin變成0,左右margin自動計算,加上這一句很容易就能實...

CSS多行文字垂直居中的兩種方法

之前寫過一篇關於 css左右居中對齊的文章,裡面提到的兩種方法其實也可以引申為垂直居中對齊。寫這篇文章是因為要相容ie6 ie7的問題,我們都知道一行文字時可以通過line height來設定垂直居中,如果是多行這個肯定不行,而我的同事因為這個用了js來實現居中對齊,我覺得這是很難理解的。故而整理這...

CSS實現垂直居中的幾種方法

最近上網上找了些關於css實現垂直居中的方法,方法挺多,下面就我看到的幾種好方法在這裡說明一下,使用 css 實現垂直居中並不容易。有些方法在一些瀏覽器中無效,因此,到底選擇哪種方法好,還要看具體情況。方法一 這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical alig...