10_CSS實現垂直水平居中的方式
2022-03-06 18:09:11

垂直水平，自然垂直和水平兩個方向上

1、行內元素

水平對齊+行高

text-align　　父元素中設置為center

line-height　設置為和父元素一樣的高度

2、塊

2.1 絕對定位+margin：auto

父元素開啟相對定位，并且有寬高

子元素開啟絕對定位 + 偏移量均為0? +? margin：auto

?

2.2絕對定位 + margin反向偏移

父元素開啟相對定位

子元素開啟絕對定位 + 向左和向下偏移50% + margin的上、左設置為子元素的一半（子元素有固定寬高）

?

2.3絕對定位+ translate（優）

父元素開啟相對定位

子元素開啟絕對定位 + 向左和向下偏移50% + translate（-50%，-50%）（子元素沒有固定寬高也能）

?

2.4 利用table-cell ，父子都有固定寬高

父元素設置　　display:table-cell　　vertical-align:middle（垂直）

子元素設置　　margin：0? auto（垂直）

2.5 利用彈性盒（優）

父元素設置　　display:flex　　主軸justify-content:center　　側軸align-item:center

子元素設置　　margin：auto

2.6 利用grid

?