如何实现Material UI Dialog相对于其父元素（指定Grid项容器）居中定位

我明白你遇到的困扰了——默认情况下Material UI的Dialog会通过Portal组件渲染到页面的body元素下，所以你设置的position: absolute是相对于整个文档，而不是你那个position: relative的div。要让Dialog精准地在目标div里居中，我们需要调整Dialog的挂载目标，再配合样式来实现。

具体解决步骤： #

1. 给目标div添加ref：获取那个position: relative的div的DOM节点，把它作为Dialog的挂载容器。
2. 配置Dialog的container属性：将Dialog的渲染目标指定为这个ref对应的DOM节点，让它脱离默认的body挂载。
3. 微调定位样式：保留你原来的居中样式，同时去掉Dialog默认的margin，避免干扰居中效果。

修改后的完整代码示例： #

import React, { useRef } from 'react';
import { Grid, Button, Dialog, DialogTitle, makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  dialogPaper: {
    position: "absolute",
    left: "50%",
    top: "50%",
    transform: "translate(-50%, -50%)",
    margin: 0 // 移除默认边距，保证居中精准度
  },
});

export default function Demo() {
  const [open, setOpen] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState('');
  const dialogContainerRef = useRef(null); // 创建ref关联目标div
  const classes = useStyles();

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <Grid container>
      <Grid item xs={5} style={{ border: "1px solid black" }}>
        Yerah
      </Grid>
      <Grid item xs={7} style={{ border: "1px solid black", height: "100vh" }}>
        {/* 给相对定位的div添加ref */}
        <div style={{ position: "relative", height: "100%" }} ref={dialogContainerRef}>
          {/* 指定Dialog的挂载容器为目标div */}
          <Dialog
            onClose={handleClose}
            aria-labelledby="simple-dialog-title"
            open={open}
            container={dialogContainerRef.current}
            classes={{ paper: classes.dialogPaper }}
          >
            <DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
            <div style={{ padding: 20 }}>
              Content will go here
            </div>
          </Dialog>
          <br />
          <Button variant="outlined" color="primary" onClick={handleClickOpen}>
            Open simple dialog
          </Button>
        </div>
      </Grid>
    </Grid>
  );
}

关键细节说明： #

• container属性的作用：这个属性让我们能自定义Dialog的渲染父容器，替代默认的body，这样Dialog的绝对定位就会基于目标div生效。
• 容器高度设置：给目标div加上height:100%，可以让Dialog相对于整个Grid项的高度居中；如果只需要在div的内容区域居中，去掉这个设置即可。

这样调整后，Dialog就能完美居中在你指定的position: relative的div里了。

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