title: How to center modal with transition on material ui and make it responsive?
body: <p>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).</p>
  
  <p>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.</p>
  
  <p>This is the code modal without transition <a href="https://stackblitz.com/edit/react-dj24rk" rel="noreferrer">link</a>.
  Works good with large or small screen size.</p>
  
  <p>This is the code modal with transition <a href="https://stackblitz.com/edit/react-i45q5z" rel="noreferrer">link</a>.</p>
  
  <p>I tried to change the value of <code>top</code> &amp; <code>left</code> but still can't get centered at the large and small screen size :</p>
  
  <pre><code>function getModalStyle() {
    const top = 25;
    const left = 25;
  
    return {
      top: `${top}%`,
      left: `${left}%`,
      transform: `translate(-${top}%, -${left}%)`,
    };
  }
  </code></pre>
  
  <p>Can anyone help me?</p>