不同屏幕尺寸的中心MUI模型

发布于 2025-01-25 02:52:02 字数 529 浏览 5 评论 0原文

我试图将我的模态盒直接放在屏幕的中心。问题在于，当屏幕更改不同尺寸时，盒子就偏离了中心。我尝试做顶级：50％和左：50％，但这根本没有使盒子中心

 centeredBox: {
    width: "400px",
    height: "380px",
    top: "50%",
    left: "50%",
    position: "absolute",
    background: "#FFFFFF",
    boxShadow: "0px 0.5px 8px rgba(0, 0, 0, 0.2)",
    borderRadius: "6px",
  },

    <Modal open={props.openModal} onClose={props.closeModal}>
      <div className={centeredBox}></div
    </Modal>

原文

I am trying to center my modal box directly in the center of the screen. The issue is that the box is off center when screen changes different sizes. I tried doing top:50% and left: 50% but that hasn't centered the box at all

 centeredBox: {
    width: "400px",
    height: "380px",
    top: "50%",
    left: "50%",
    position: "absolute",
    background: "#FFFFFF",
    boxShadow: "0px 0.5px 8px rgba(0, 0, 0, 0.2)",
    borderRadius: "6px",
  },

    <Modal open={props.openModal} onClose={props.closeModal}>
      <div className={centeredBox}></div
    </Modal>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薄凉少年不暖心 2025-02-01 02:52:02

centeredBox: {
    position: absolute,
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    margin: auto;
    width: "400px",
    height: "380px",
}

centeredBox: {
    position: absolute,
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    margin: auto;
    width: "400px",
    height: "380px",
}

回复收藏 0 原文

~没有更多了~