实质性用户界面：Card componenet中的中心CardContent

Question

我正在尝试使用Material UI在Card组件中水平和垂直居中放置CardContent。

这就是我所拥有的：

const styles = {
  card: {
    maxWidth: 120,
    minHeight: 120,
    maxHeight: 120,
  },
}

...

<Card className={this.props.classes.card}>
  <CardContent>
    <Grid container justify="center">
      <Grid item xs={12} style={{ backgroundColor: "red" }}>
        <Typography gutterBottom align="center" variant="title">
          Markedup123 Plan
        </Typography>
      </Grid>
    </Grid>
  </CardContent>
</Card>

它看起来像这样：

我如何水平和垂直放置CardContent？

这是一个有效的示例：https://codesandbox.io/s/pw90op914q