CSS – 使用 transform2D 实现元素居中
简介
元素如何在一个父盒子中居中显示?
使用transform实现居中
如图可视,红色小正方形为大圆形的子组件,要如何让小正方形居中在这个大圆形中?
我们使用 top:50% 和 left:50% 来设置位置,但是这个小正方形的移动点在左上角,当我们设置后,会得到以下效果
这是因为,小红色正方形的移点在左上角,我们有两种方法可以让小红正方形实现居中,一是计算小红正方形的边长的一半,再减掉移动
大圆的大小为 300px * 300px
正方形偏移了 50% 和 50% ,即在大圆的 150px 和 150px 之间
正方形的大小为 100px * 100px,减去一半为50px 和 50px
即正方形向上和向左减去 50px 就能得到正中
top:150-50 px
left:150 - 50 px
还有一种比较方便的方法,便是使用 transform 转移到中间,同样得到相同效果
cube{
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
THE END
0
二维码
打赏
海报
CSS – 使用 transform2D 实现元素居中
元素如何在一个父盒子中居中显示?
TZMing花园 - 软件分享与学习
共有 0 条评论