css absolute 居中

/* 使用 CSS absolute 实现元素居中 */

/* HTML 结构 */
<div class="container">
  <div class="centered-box"></div>
</div>

/* CSS 样式 */
.container {
  position: relative; /* 设置容器为相对定位 */
  width: 100%;         /* 容器宽度 */
  height: 100vh;       /* 容器高度，使用视口单位 */
}

.centered-box {
  position: absolute;  /* 设置元素为绝对定位 */
  top: 50%;            /* 元素顶部距离容器顶部50% */
  left: 50%;           /* 元素左边距离容器左边50% */
  transform: translate(-50%, -50%); /* 向左和向上移动自身宽度和高度的一半，实现居中 */
  width: 200px;        /* 元素宽度 */
  height: 200px;       /* 元素高度 */
  background-color: lightblue; /* 背景颜色 */
}

解释说明：

1. 容器（.container）：设置为 position: relative，确保内部的绝对定位元素是相对于这个容器进行定位的。
2. 居中元素（.centered-box）：通过 position: absolute 和 top: 50%、left: 50% 将元素的左上角移动到容器的中心位置。然后使用 transform: translate(-50%, -50%) 将元素向左和向上移动自身宽度和高度的一半，从而实现真正的居中效果。

这种方式适用于需要将一个固定大小的元素在父容器内水平和垂直居中的场景。