如何在覆盖全屏的div内居中嵌套div（不使用flexbox）

数据老陈

2026-9-26

问题根因

你的内部.spinner用了position: absolute，属于脱离文档流的定位，父元素.spinner-box没有其他普通流内容支撑高度，也没有显式设置宽高，所以高度直接坍缩为0，自然无法展示背景色
要实现全屏覆盖的效果，需要给外层容器显式设置占满整个视口的尺寸，同时调整定位逻辑避免布局错乱

可行解决方案

方案1：Flex布局实现（更推荐，写法简洁兼容性好）

先添加全局样式清除默认边距，避免出现多余白边或滚动条：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

调整容器样式如下，HTML代码无需修改：

.spinner-box {
  /* 固定定位占满整个视口，不随页面滚动 */
  position: fixed;
  top: 0;
  left: 0;
  /* 宽高设为视口的100%宽高 */
  width: 100vw;
  height: 100vh;
  background-color: #0F83E8;
  /* flex布局直接实现子元素水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：设置z-index避免被其他页面元素遮挡 */
  z-index: 999;
}

.spinner {
  background-color: #0000cc;
  text-align: center;
  /* 可自行调整内边距、宽高等样式，不需要写定位相关属性 */
  padding: 20px 40px;
}

方案2：保留原有定位逻辑的修改方案

如果你不想改动内部子元素的定位写法，只需要调整外层容器样式即可：

/* 同样先加全局边距清除 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.spinner-box {
  /* 设为相对定位，作为内部绝对定位元素的参照物 */
  position: relative;
  /* 占满全屏 */
  width: 100vw;
  height: 100vh;
  background-color: #0F83E8;
}

.spinner {
  position: absolute;
  /* 要完全垂直居中需把top设为50%，原写法40%会偏上 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0000cc;
  text-align: center;
  padding: 20px 40px;
}

注意事项