Div居中冲突问题：元素重叠且窗口缩放显示异常求助

你的问题核心是定位逻辑混乱和响应式适配不足：原代码里混合使用position: relative/absolute却没给父容器.pack-term设置定位上下文，导致绝对定位元素脱离正常文档流乱跑；固定的百分比top和vw值在窗口缩放时无法自适应，直接引发重叠和居中失效。

直接重构布局逻辑，用Flexbox替代复杂定位，既能实现稳定居中，又能保证响应式效果：

修复后的CSS代码 #

/* 父容器设置Flex布局，控制内部元素排列，同时作为定位上下文 */
.pack-term {
  position: relative;
  width: 50vw;
  min-height: 50vh;
  display: flex;
  flex-direction: column; /* 内部元素垂直排列 */
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

/* 统一文本样式，去掉冗余设置 */
.question-text, .question-text2 {
  font-size: 3rem;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
}

.question-text2 {
  text-shadow: 1px 1px 2px;
}

#valueIndex, #valueIndex2 {
  color: salmon;
  font-size: 3rem;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 104;
}

/* 如果需要左右分栏展示两个.pack-term容器 */
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
}

修复后的HTML代码 #

<!-- 外层容器包裹两个.pack-term，实现左右分栏 -->
<div class="container">
  <div class="pack-term">
    <h2 class="question-text">
      <span>${item2.name}</span>
    </h2>
    <h3 id="valueIndex2">
      <span>${item2.value}</span>
    </h3>
  </div>

  <div class="pack-term">
    <h3 id="valueIndex">
      <span>${item1.value}</span>
    </h3>
    <h2 class="question-text2">
      <span>${item1.name}</span>
    </h2>
  </div>
</div>

关键修复点 #

• 给.pack-term设置position: relative，确保内部如果用绝对定位时以父容器为基准（这里用Flex就足够，无需绝对定位）。
• 用Flexbox实现容器内元素的垂直居中，替代繁琐的定位组合，布局更稳定。
• 外层加.container用Flex实现两个.pack-term的左右分栏，避免元素重叠，窗口缩放时自动调整间距。
• 移除冗余的height: 0vh、固定left/top值，这些是导致布局崩溃的核心原因。

这样修改后，不管窗口怎么调整，元素都会保持居中且不会重叠，完全不需要依赖top + transform这种不稳定的居中方式。

内容的提问来源于stack exchange，提问作者Matija Knezevic