css居中總結

2021-09-16 21:50:55 字數 880 閱讀 1034

inline或者inline-*元素

.center-children
inline、inline-block、inline-table、inline-flex等有效

乙個塊級元素

.center

多個塊級元素使用inline-block和text-align配合或者使用flex

inline或者inline-*元素

1、單行:上下新增相等的內邊距

.link
2、多行:

// 可以模擬**

.center-table

.center-table children

// 可以使用flexbox

.flex-center-vertically

塊級元素

知道塊級元素的高度

.parent 

.child

不知道塊級元素的高度

.parent 

.child

使用flexbox

.parent

固定寬度和高度

.parent 

.child

不知道寬度和高度

.parent 

.child

使用flexbox

.parent

css 居中總結

1.定寬塊狀元素 水平居中 divstyle 2.不定寬塊狀元素 水平居中 wrap class wrap 設定我所在的div容器水平居中 div 2.display inline textalign center 它將塊狀元素的 display 型別改為 inline,變成了行內元素,所以少了一些...

css居中總結

給父元素設定 text align center 但對浮動元素,絕對定位元素無效設定margin 0 auto 將塊級元素display設定為inline,然後使用text align center 給父元素設定float,position relative,left 50 子元素設定positio...

css居中總結

1.我們可以通過給該元素的父級設定margin 0 auto的方式來實現。html class parent class child center div div css child此時檢查元素即可即可實現內層的div實現了居中,這種方式是最為我們熟知的,其缺點是需要設定子元素的寬度。2.通過pos...