嵌套div在HTML中显示正常，React中布局异常求解决

问题核心 #

你用绝对定位实现的嵌套div布局在单独HTML文件中正常，但React应用中异常，核心原因通常是定位上下文变化或尺寸参照丢失，以下是具体排查和解决步骤：

排查方向与解决方案 #

1. 修复居中方式，避免尺寸计算错误 #

你原本用margin-top和margin-left结合calc做居中，这种方式依赖手动计算视口尺寸，一旦父元素尺寸参照变化就会出错。改用transform: translate(-50%, -50%)是更可靠的居中方案，无需手动计算：

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 替代原margin计算 */
  border: 1pt solid rgb(192, 184, 184);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  height: 30vh; /* 用vh代替%，确保高度基于视口 */
  width: 30vw; /* 用vw代替%，确保宽度基于视口 */
}

2. 明确子元素的定位上下文 #

绝对定位的子元素默认会参照最近的非static定位祖先定位。React项目中，组件嵌套可能导致.centered-div的父元素（比如#root）被设置了position: relative，或者.centered-div的定位属性被全局样式覆盖。给.centered-div显式添加position: relative，确保子元素.parent-div始终以它为定位参照：

.centered-div {
  /* 保留其他样式 */
  position: relative; /* 明确作为子元素的定位容器 */
}

3. 确保根元素的高度参照正确 #

React项目默认不会给html、body和#root设置100%高度，这会导致.centered-div的height: 30%没有参照，最终高度为0。在全局样式中添加以下代码：

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

4. 检查样式冲突 #

用浏览器开发者工具查看.centered-div和.parent-div的计算样式，确认是否有全局样式（比如CSS模块、Tailwind）覆盖了position、width、height等属性。如果有冲突，调整样式优先级（比如用更具体的选择器）。

修改后的完整代码 #

全局样式（React项目入口文件或全局CSS） #

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

组件样式 #

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1pt solid rgb(192, 184, 184);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  height: 30vh;
  width: 30vw;
  position: relative;
}

.parent-div {
  position: absolute;
  box-sizing: border-box;
  height: 70%;
  width: 70%;
  border: 1pt solid rgb(192, 184, 184);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

React组件示例 #

import './YourComponent.css';

function YourComponent() {
  return (
    <div className="centered-div">
      <div className="parent-div"></div>
    </div>
  );
}

export default YourComponent;

内容的提问来源于stack exchange，提问作者Feather Ridgemont