如何将Modal相对于指定div/元素居中（而非屏幕居中）

我需要实现Modal相对于指定div/元素居中，而非默认的屏幕垂直水平居中。示意图中绿色是期望的居中效果（相对于指定元素），红色是当前默认的屏幕居中效果：

当前代码示例 #

React组件代码 #

export default Parent = () => {
  return (
    <Container id="abc">
         <Child data={data} />;
    </Container>
     );
  };
};

export default Child = () => {
  return (
    <Container>
         <Modal />;
    </Container>
     );
  };
};

Modal样式代码 #

export const ModalStyles = createGlobalStyle`
  .modal-modal {
    padding: 0;
    border-radius: 18px;
    max-width: 1500px;
    position: relative;
    min-width: 450px;
    margin: auto;
  }

  .modal-closeButton {
    align-items: center;
    justify-content: center;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }

  .modal-closeIcon {
    width: 60%;
    height: 60%;
  }
`;

实现步骤 #

要实现相对于指定元素的居中，核心是利用CSS定位上下文，具体操作如下：

1. 给目标参照元素设置定位上下文
   给需要作为Modal参照的容器（即Parent组件中id为abc的Container）添加相对定位，让它成为子元素的定位基准：

   #abc {
     position: relative;
   }
   

2. 修改Modal的定位样式
   将Modal容器（.modal-modal）的定位方式从relative改为absolute，并通过位移实现居中：

.modal-modal {
padding: 0;
border-radius: 18px;
max-width: 1500px;
position: absolute; /* 切换为绝对定位 /
min-width: 450px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); / 基于自身尺寸居中 /
margin: 0; / 移除原有的auto margin */
}

3. **避免中间容器干扰定位**
如果Child组件中的Container是Modal的直接父元素，确保该容器没有设置`position: relative;`，否则Modal会以它为参照，而非目标的`#abc`容器。

4. **适配遮罩层（若有）**
如果Modal带有遮罩层，同样需要将遮罩层改为绝对定位，覆盖目标容器的整个区域：
```css
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

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