css绝对定位居中

作者：嗜神魔影发布日期:2025-10-26 浏览:57

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

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

/* CSS 样式 */
.centered-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

/* 解释说明：
1. `position: absolute;`：将元素设置为绝对定位，使其相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）。
2. `top: 50%; left: 50%;`：将元素的左上角移动到其包含块的中心位置。
3. `transform: translate(-50%, -50%);`：通过平移变换将元素自身向左和向上各移动自身宽度和高度的一半，从而实现真正的居中效果。
4. `width` 和 `height`：定义了元素的宽度和高度，可以根据需要调整。
*/

上一篇：css solid

下一篇：css 白色