css区块居中在另一个区块上

CSS中许多人都会遇到这样一个问题，就是如何让一个区块在另一个区块上居中显示。这个问题并不是很难，只需要使用一些简单的为道，就可以轻松解决。

.parent {
  position: relative;
  width: 500px;
  height: 500px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

首先，我们需要把要居中的区块放在一个父级区块中。然后给父级区块设置定位为相对定位，这样才能为要居中的子区块创建定位的参照系。

接下来，我们给子区块设置绝对定位，并通过top: 50%; 和 left: 50%;让子区块的中心点位于父级区块的中心位置。

最后，我们通过使用transform属性中的translate()函数，将子区块向左上方移动一定的距离，使得子区块一半宽度和高度的中心点与父级区块的中心重合，这样就完成了区块在另一个区块上居中显示的效果。

需要注意的是，这种方式需要给父级区块设置宽度和高度，否则子区块默认的宽度和高度会坍缩成0。

以上是代码的实现，只要在HTML中按照上述结构填写，就能轻松实现区块在另一个区块上居中的效果。