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

 

本文摘自 :https://www.cnblogs.com/tybm/p/15972665.html


更多科技新闻 ......