How to center modal with transition on material ui and make it responsive?
By default the modal creates a parent container that uses flex, so in order to center you can comment your left: property that it is set to your modal,
return {
top: `${top}%`,
margin:'auto'
// left: `${left}%`,
// transform: `translate(-${top}%, -${left}%)`,
};
and in your modal container you can align items with this
<Modal
...
style={{display:'flex',alignItems:'center',justifyContent:'center'}}
>
https://stackblitz.com/edit/react-1ny5g7?file=demo.js
This works for me:
function getModalStyle() {
return {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
};
}