超全面的CSS居中方法總結

2021-10-11 14:36:58 字數 1285 閱讀 8156

class


="parent"


>


class


="child"


>


contentspan


>


div>
方法一：

.parent
方法二：

.parent


.parent


class


="parent"


>


class


="child"


>


contentdiv


>


div>


.parent


.child
方法一：定位

.parent


.child
方法二：計算方法calc

.parent


.child
方法三：定位 + transform

.parent


.child
方法四：定位 + margin

設定left/right/top/bottom為0後，子元素填充父元素的所有可用空間，然後margin： auto，就實現了垂直居中效果

.parent


.child
方法五：padding方法

因為父元素沒有高度，子元素沾滿父元素的空間；然後父元素設定padding值

.parent


.child
方法六：flex布局

.parent


.child
方法七：偽元素

.parent


/* before偽元素預設是行內元素 */


.parent::before


.child
方法八：calc函式

.parent


.child

最全面的垂直居中方法

最全面的垂直居中 divspan在padding中，主要涉及到是對盒模型的計算掌握，各個數值 優點 簡單，只需設定上下內邊距 缺點 父元素不能設定固定高度 最全面的垂直居中 divspan相信各位都熟悉line height屬性了，無非就是和父元素的height相互比較的值 在這裡需要提醒的一點是 ...

CSS元素居中方法總結

css實現元素居中。1 使用position absolute,設定left top margin left margin top的屬性 one 這種方法基本瀏覽器都能夠相容，不足之處就是需要固定寬高。2 使用position fixed,同樣設定left top margin left margi...

CSS元素居中方法總結

左右居中 text align center 上下居中 line height height數值 margin auto 讓盒子左右居中。position absolute left 50 margin left 寬的一半 top 50 margin top 高的一半 讓盒子上下左右居中。缺點 不夠...