Center component inside the material-ui grid

The accepted answer did not work for me, I got an error indicating that there was no overload for grid with an Align prop. I instead wrapped the component I wanted center aligned in a Grid container, with justify="center" and alignItems="center".

So in OPs example, it would look like:

<Fragment>
<Grid
  container
  spacing={24}
  justify="center"
  style={{ minHeight: '100vh', maxWidth: '100%' }}
  >
    <Grid item xs={3} align="center">
       <Grid container justify="center" alignItems="center">
          <Card />
       </Grid>
    </Grid>
</Grid>

I soved it by adding align="center" in the JSX code that means align-items: center in CSS as explained here.

The code was done like this:

  <Fragment>
    <Grid
      container
      spacing={24}
      justify="center"
      style={{ minHeight: '100vh', maxWidth: '100%' }}
      >
     <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
    </Grid>
  </Fragment>