兩種常用的利用CSS讓元素垂直居中 摘

2021-08-01 18:15:11 字數 1457 閱讀 5350

利用css讓元素垂直居中是個很頭疼的問題,這裡就介紹兩種簡單實用的方法。

方法一:利用行高(line-height)定位

line-height通常是用於調節一段文字的行與行之間的距離,或者說兩行文字之間的距離,如果行高是500px,那麼每一行中的文字距離本行的頂部就是250px,如果將文字的行高設為500px,並且外面的容器的高度也為500px,同樣可以實現垂直居中,但是用它來實現垂直居中,也是有缺點的,就是如果內容過多,文字就會跑到下一行,那麼內容就不可能垂直居中了。

html**:

css**:

body

h1 h1 span

p strong

方法二:利用絕對定位

先來看看效果,檢視演示

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

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

問題延伸

如果元素的外面還有乙個父級元素,如果才能讓元素垂直居中於父級元素內部?比如下面的**,多了乙個父級元素

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**中加入position: relative;才能夠使內部元素垂直居中於父級內部,**如下:

.container

兩種常用的佇列

與棧相反,佇列是一種先進先出的線性表。它只允許在表的一端進行插入,而在另一端刪除元素。和線性表類似,佇列也可以有兩種儲存表示。用鍊錶表示的佇列簡稱鏈佇列。下面是帶頭結點的單鏈佇列的實現 1 include 2 include 34 typedef char qelemtype 5 單鏈佇列節點 6 ...

常用的css將元素垂直居中的6種方法

1.使用line height將單行文字垂直居中 設定line height等於height,可使單行文字垂直居中 例 div 效果如下 加入line height屬性後 div 效果 2.用定位的方法實現垂直居中 使用position absolute 和position relative 利用定...

CSS的兩種盒模型

關於css的盒子模型相信學習前端的同學都有所耳聞,因為它太基礎太重要了。提起盒子模型,大家可能會想到content,padding,border,margin這些詞彙,還有也許還會想起盒子模型有兩種,比如ie的盒子模型與w3c的盒子模型,那麼我們怎麼來區分呢?先來看看w3c的盒子模型 w3c 盒子模...