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