CSS的7種常用的垂直居中的方法

2022-06-25 04:48:12 字數 432 閱讀 8465

1、絕對定位上下百分之五十然後上外邊距做外邊距都是他的寬高的一半

#child

2、根據上面的方法有一定的變化,不過也是根據絕對定位

.child

3、用於文字且單行,line-height要等於父元素高度

.div

4、利用display:table;與display:table-cell;(注意只有.child框內元素會垂直居中)

.parent

.child

5、利用css3的transfrom

.child

6、絕對定位不需要知道寬高

.child

7、flex垂直居中方式

.child

css實現div垂直水平居中的2種常用方法

利用vertical align middle進行垂直方向上的居中對齊,此方法需要滿足的條件 設定父元素的行高line height等於父元素height的高度 子元素必須是行內塊級元素display inline block 子元素設定vertical align middle 此方法在開發中不能...

7種CSS實現垂直居中的方法總結

忽然發現自己已經有段時間沒有好好的複習下css布局了,有點慚愧啊 於是打算總結一下關於css垂直居中的7種方法。設定行高 line height 在css中,line height 屬性設定兩段段文字之間的距離,也就是行高,如果我們把一段文字的line height設定為父容器的高度就可以實現文字垂...

css的垂直居中

請先看部落格 1.行內元素的不定高,垂直居中的話,子div利用line height.vertical align middle 這個屬性用來設定文字對其方式,常用來非快元素的垂直居中。如果直接文字的話,是不行的。2.如果塊元素的話,考慮position,但是這個不常用的話。最常用的還是變為行內元素...