css 绝对定位居中

作者：卍…`傷` 发布日期:2025-06-09 浏览:67

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

/* HTML */
<div class="absolute-center"></div>

/* CSS */
.absolute-center {
  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%;`：将元素的顶部和左边分别移动到父容器的50%位置。
3. `transform: translate(-50%, -50%);`：通过变换将元素自身向左和向上各移动其宽度和高度的一半，从而实现精确居中。
4. `width` 和 `height`：定义元素的宽高，可以根据实际需求调整。
*/

上一篇：css3 选择器

下一篇：css 禁用滚动条