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
分享
二维码
打赏
海报
CSS – 使用 transform2D 实现元素居中
元素如何在一个父盒子中居中显示?
<<上一篇
下一篇>>