css3 transfrom:translate元素居中

CSS3的transform: translate()函数可以使元素居中排版，下面是transform: translate()函数的例子：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使容器的高度为视口高度 */
}
.item {
  position: relative; /* 相对定位 */
  transform: translate(-50%, -50%); /* 水平和垂直移动自身的50% */
}
<div class="container">
  <div class="item">居中元素</div>
</div>

在这个例子中，.container是一个flex容器，它使其子元素.item在水平和垂直方向上居中。

然后.item使用translate()函数将自身沿水平和垂直方向各移动50%，这样它的中心点就会与.container的中心点对齐。