当前位置: 首页 > Web前端 > CSS

使用transform将未知大小的元素居中

时间:2023-03-31 10:55:44 CSS

1。水平居中这是一个例子。子元素在父元素中相对于父元素定位时,如果不写left和top,则默认定位在父元素的左上角。角子元素加上left:50%后,此时的50%指的是父元素宽度的50%,即100px,即子元素以自己的左边为基准,距离100px的被翻译是因为它是子元素的左侧。百分比都是相对于子元素本身的,一定要和上面左边的50%区分开来。变换:翻译X(-50%);意思是子元素向左平移距离是自身宽度的一半上述操作相当于子元素向右移动父元素的一半,然后自己向左移动一半,实现水平居中2.垂直居中和垂直居中。同理,给子元素加上top:50%表示,以子元素的top为基准,平移100px的距离,然后用transform平移回去,实现垂直居中。3.水平和垂直居中。会被覆盖需要使用translate(x,y)属性,即translate(-50%,-50%)