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%)
}