如何将Material-UI Card组件居中显示在页面中央？

我尝试把Material-UI的Card组件放在页面正中央，但没成功。目前用Grid组件做布局，Card没法实现垂直和水平居中。

当前代码：

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

当前效果：Card仅在水平方向有部分对齐，未处于页面垂直中心位置。
期望效果：Card完全位于页面的垂直和水平正中央。

解决方案1：用Grid容器包裹Card #

给Card套一个全屏的Grid容器，让它占满整个视口高度并开启居中：

<Grid container 
  sx={{ 
    minHeight: '100vh', // 占满整个视口高度
    justifyContent: 'center', 
    alignItems: 'center' 
  }}
>
  <Grid item>
    {/* 原有Card代码 */}
    <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>
  </Grid>
</Grid>

解决方案2：用Box组件实现居中 #

如果偏好使用Material-UI的通用布局组件Box，可这样写：

<Box 
  sx={{
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: '100vh', // 确保占满视口高度
    width: '100%'
  }}
>
  <Card>
    {/* 原有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>
</Box>

关键说明 #

• 必须让外层容器占据整个视口高度（minHeight: '100vh'），否则垂直居中无法生效。
• 外层容器需同时设置justifyContent: 'center'（水平居中）和alignItems: 'center'（垂直居中）。
• Card内部的原有布局无需改动，仅需给它套一层全屏居中的容器即可。

内容的提问来源于stack exchange，提问作者Vaishnav