如何在材质 ui 上使用过渡使模态居中并使其响应？答案

【问题标题】：How to center modal with transition on material ui and make it responsive?如何在材质 ui 上使用过渡使模态居中并使其响应？
【发布时间】：2018-11-29 14:46:28
【问题描述】：

我尝试使用 Material UI 将模态与过渡一起使用，但无法将其居中并使其在小尺寸屏幕（移动设备）中具有响应性或居中。

如果不使用过渡，模式可以居中并且在小尺寸上看起来不错，但如果我添加过渡，模式无法居中或响应。

这是没有转换的代码模态link。适用于大屏幕或小屏幕。

这是带有转换link的代码模式。

我尝试更改top & left 的值，但仍然无法在大小屏幕尺寸上居中：

function getModalStyle() {
  const top = 25;
  const left = 25;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

谁能帮帮我？

【问题讨论】：

标签： css material-ui responsive

【解决方案1】：

默认情况下，模态创建一个使用 flex 的父容器，所以为了居中你可以注释你的 left: 属性，它被设置为你的模态，

return {
    top: `${top}%`,
    margin:'auto'
    // left: `${left}%`,
    // transform: `translate(-${top}%, -${left}%)`,
  };

并且在您的模态容器中，您可以将项目与此对齐

 <Modal
    ...
    style={{display:'flex',alignItems:'center',justifyContent:'center'}}
  >

https://stackblitz.com/edit/react-1ny5g7?file=demo.js

【讨论】：

似乎父容器现在是默认的display: block，所以我还必须将display: flex 添加到模式中才能正常工作。
有图书馆吗？ npm 包可以轻松轻松地完成这些功能

【解决方案2】：

这对我有用：

{
    width: '100%',
    maxWidth: '100vw',
    maxHeight: '100%',
    position: 'fixed',
    top: '50%',
    left: '0',
    transform: 'translate(0, -50%)',
    overflowY: 'auto'
}

【讨论】：

【解决方案3】：

这对我有用：

function getModalStyle() {
  return {
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
  };
}

【讨论】：