4、元素水平垂直居中的方法有哪些？如果元素不定寬高呢？

白色背景藍色屋頂的小房子A small house with blue roof on a

實現元素水平垂直居中的方式：

利用定位+margin：auto

利用定位+margin：負值

利用定位+transform

table佈局

flex佈局

grid佈局

1-利用定位+margin：auto

2-利用定位+margin：負值

3-利用定位+transform

4-table佈局

5-flex彈性佈局

6-grid網格佈局

7-總結

根據元素標籤的性質，可以分為：

內聯元素居中佈局

塊級元素居中佈局

內聯元素居中佈局

水平居中

行內元素可設定：text-align： center

flex佈局設定父元素：display： flex； justify-content： center

垂直居中

單行文字父元素確認高度：height === line-height

多行文字父元素確認高度：disaply： table-cell； vertical-align： middle

塊級元素居中佈局

水平居中

定寬： margin： 0 auto

絕對定位+left：50%+margin：負自身一半

垂直居中

position： absolute設定left、top、margin-left、margin-top（定高）

display： table-cell

transform： translate（x， y）

flex（不定高，不定寬）

grid（不定高，不定寬），相容性相對比較差