css 绝对定位 居中

/* 使用绝对定位使元素居中 */

/* 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; /* 背景颜色 */
}

解释说明：

• .container 是父容器，设置了 position: relative，这样它的子元素可以相对于它进行绝对定位。
• .centered-box 是需要居中的子元素，通过设置 position: absolute，可以让它脱离文档流并根据最近的已定位祖先元素（这里是 .container）进行定位。
• top: 50% 和 left: 50% 将元素的左上角移动到父容器的中心位置。
• transform: translate(-50%, -50%) 将元素向左和向上移动自身宽度和高度的一半，从而实现真正的居中效果。