如何将材料 - UI卡组件集中在页面中间？

Question

我试图将材料 - UI卡组件集中在页面中间，但我面临问题。我正在使用网格组件并设置布局，但是该卡不会在屏幕上垂直或水平居中。

<Card>
  <Grid container alignItems="center">
    <Grid item align="center" xs={4}>
      <img src={this.props.image_url} height="100%" width="100%" />
    </Grid>
    <Grid item align="center" xs={8}>
      <Typography component="h5" variant="h5">
        {this.props.title}
      </Typography>
      <Typography color="textSecondary" variant="subtitle1">
        {this.props.artist}
      </Typography>
      <div>
        <IconButton
          onClick={() => {
            this.props.is_playing ? this.pauseSong() : this.playSong();
          }}
        >
          {this.props.is_playing ? <PauseIcon /> : <PlayArrowIcon />}
        </IconButton>
        <IconButton>
          <SkipNextIcon />
        </IconButton>
      </div>
    </Grid>
  </Grid>
  <LinearProgress variant="determinate" value={songProgress} />
</Card>

图片：

我想进入中心

对于垂直中心，将卡片组件与外部网格容器包裹起来，并将容器的高度调整为100VH：

<Grid
  container
  justifyContent="center"
  alignItems="center"
  style={{ height: "100vh" }}
>
  <Grid item xs={10} sm={8} md={6} lg={4}>
     Place the Card component code here 
  </Grid>
</Grid>

Answer 1