使用 position: absolute 实现盒子内居中 | CSS 布局技巧

使用 position: absolute 实现盒子内居中

可以使用以下样式：

.box {
  position: relative;
}

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

在这里，我们首先将包含盒子的父元素设置为相对定位 (position: relative)，以便绝对定位元素可以相对于它进行定位。

然后，我们将要居中的元素设置为绝对定位 (position: absolute)。我们使用 top 和 left 属性将其放置在盒子的中心。然后，我们使用 transform 属性并设置 translate(-50%, -50%)，以便将元素的中心点移动到盒子的中心。这样，元素就会在盒子内居中了。