Material-ui 网格内的中心组件

我想使用相同的卡片并使它们居中对齐，我搜索并尝试了一些解决方案，但所有这些解决方案都仅对齐组件网格，而不是组件内容本身（我需要它们与边界和自身的距离相等）。

我正在使用这段代码（https://codesandbox.io/embed/32o8j4wy2q https://codesandbox.io/embed/32o8j4wy2q):

<Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: '80vh' }}>
      <Grid container item xs={12} spacing={8}>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
      </Grid>
    </Grid>

卡代码无关紧要，但我只是复制了material-ui 的示例之一。

另外，如果我决定将来添加或删除一些卡片，如何使用弹性盒（或其他工具）自动对齐？

我通过添加解决了这个问题align="center"在 JSX 代码中这意味着align-items: center在 CSS 中，如所解释的here https://github.com/mui-org/material-ui/issues/6013.

代码是这样完成的：

  <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>