为什么我的div块在窗口缩放时无法保持固定位置？

算力阿峰

2026-9-23

问题原因

你当前给#bodyCenterCont设置的margin-top: 15%、margin-left: 30%是相对父容器尺寸计算的百分比值，只能在特定窗口大小下近似居中，窗口尺寸变化后，百分比对应的实际像素值和蓝色块本身固定宽高的适配关系被破坏，就会出现偏移。

解决方案

不需要复杂的定位设置，直接给父容器#bodyCont开启Flex布局实现居中即可，仅需修改两处CSS代码：

给#bodyCont新增Flex布局相关属性
删除#bodyCenterCont原有的margin和position配置

修改后的对应CSS片段如下：

/* 其余CSS重置代码无需修改，保持原样即可 */
#bodyCont {
  background-image: linear-gradient(grey, black);
  height: 100%;
  width: 100%;
  /* 新增以下3行 */
  display: flex;
  justify-content: center;
  align-items: center;
}

#bodyCenterCont {
  background-color: blue;
  height: 400px;
  width: 350px;
  /* 移除原来的position: relative、margin-top:15%、margin-left:30%即可 */
}