How to center modal with transition on material ui and make it responsive?

Question

I trying to use modal with transition using Material UI and have problem to centering it and also make it responsive or center in small size screen (mobile).

Modal can be centered and looks good on small size if not using transition, but if i add a transition, modal can't be centered or responsive.

This is the code modal without transition link. Works good with large or small screen size.

This is the code modal with transition link.

I tried to change the value of top & left but still can't get centered at the large and small screen size :

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

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

Can anyone help me?

Answer 1

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

Answer 2

This works for me:

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