10_CSS實(shí)現(xiàn)垂直水平居中的方式
2022-03-06 18:09:11

垂直水平，自然垂直和水平兩個(gè)方向上

1、行內(nèi)元素

水平對(duì)齊+行高

text-align　　父元素中設(shè)置為center

line-height　設(shè)置為和父元素一樣的高度

2、塊

2.1 絕對(duì)定位+margin：auto

父元素開(kāi)啟相對(duì)定位，并且有寬高

子元素開(kāi)啟絕對(duì)定位 + 偏移量均為0? +? margin：auto

?

2.2絕對(duì)定位 + margin反向偏移

父元素開(kāi)啟相對(duì)定位

子元素開(kāi)啟絕對(duì)定位 + 向左和向下偏移50% + margin的上、左設(shè)置為子元素的一半（子元素有固定寬高）

?

2.3絕對(duì)定位+ translate（優(yōu)）

父元素開(kāi)啟相對(duì)定位

子元素開(kāi)啟絕對(duì)定位 + 向左和向下偏移50% + translate（-50%，-50%）（子元素沒(méi)有固定寬高也能）

?

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

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

子元素設(shè)置　　margin：0? auto（垂直）

2.5 利用彈性盒（優(yōu)）

父元素設(shè)置　　display:flex　　主軸justify-content:center　　側(cè)軸align-item:center

子元素設(shè)置　　margin：auto

2.6 利用grid

?