How to center vertically and horizontally in React with Material-UI?

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.

This is wha I have so far:

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: "flex",
    flexDirection: "column",
    justifyContent: "center"
  },
  card: {
    maxWidth: '40%',
    minHeight: '20vh',
  },
})

export default function LoginPage () {
  const classes = useStyles()

  return (
    <Grid className={classes.root} spacing={0} align="center" justify="center">
      <Card className={classes.card} align="center" justify="center">
        <Button variant="contained" color="primary">
          Hello World
        </Button>
      </Card>
    </Grid>
  )
}

It's centered vertically but not horizontally, when I change other parameter I get it centered horizontally but not vertically.

Screenshot of the result

Any Ideas?

Best regards.