title: How to center vertically and horizontally in React with Material-UI?
body: <p>I want to center a Button inside of a Card that is in the center of the screen. So far I haven't been able to.</p>
  <p>This is wha I have so far:</p>
  <pre><code>import React from 'react'
  import Button from '@material-ui/core/Button'
  import { makeStyles } from '@material-ui/core/styles'
  import { Card } from '@material-ui/core'
  import Grid from '@material-ui/core/Grid'
  
  const useStyles = makeStyles({
    root: {
      background: 'linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)',
      minWidth: '100%',
      minHeight: '100vh',
      display: &quot;flex&quot;,
      flexDirection: &quot;column&quot;,
      justifyContent: &quot;center&quot;
    },
    card: {
      maxWidth: '40%',
      minHeight: '20vh',
    },
  })
  
  export default function LoginPage () {
    const classes = useStyles()
  
    return (
      &lt;Grid className={classes.root} spacing={0} align=&quot;center&quot; justify=&quot;center&quot;&gt;
        &lt;Card className={classes.card} align=&quot;center&quot; justify=&quot;center&quot;&gt;
          &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot;&gt;
            Hello World
          &lt;/Button&gt;
        &lt;/Card&gt;
      &lt;/Grid&gt;
    )
  }
  </code></pre>
  <p>It's centered vertically but not horizontally, when I change other parameter I get it centered horizontally but not vertically.</p>
  <p><a href="https://i.stack.imgur.com/QK2Dp.png" rel="nofollow noreferrer">Screenshot of the result</a></p>
  <p>Any Ideas?</p>
  <p>Best regards.</p>