React Material UI Grid网格内的Card卡片无法居中如何解决？

问题原因 #

你遇到的不生效问题来自两个常见场景：

• 版本属性不匹配：Material UI v4的Grid容器水平居中属性为justify="center"，v5及后续版本才支持justifyContent="center"，属性不匹配版本自然不生效。
• Card未在Grid item内居中：你给Card设置了maxWidth: 345，但Grid item默认占满分配的列宽（md断点下每个item占1/3屏幕宽度，通常远大于345px），此时就算Grid容器把item居中了，Card在item内部默认左对齐，视觉上依然没有居中。

解决方案 #

先确认你使用的Material UI版本，对应修改代码即可：

MUI v5 版本修改示例 #

给每个Grid item添加弹性布局属性，让内部的Card居中：

<Grid container justifyContent="center">
  <Grid item xs={12} md={4} sx={{ display: 'flex', justifyContent: 'center' }}>
    <Card style={{maxWidth: 345}}>
      <CardActionArea>
        <CardMedia
          style={{height: 140}}
          image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
          title="Contemplative Reptile"
          />
        <CardContent>
          <Typography variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography gutterBottom variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
          <Typography gutterBottom varient="h5" color="Secondary">
            100
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  </Grid>
  <Grid item xs={12} md={4} sx={{ display: 'flex', justifyContent: 'center' }}>
    <Card style={{maxWidth: 345}}>
      <CardActionArea>
        <CardMedia
          style={{height: 140}}
          image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
          title="Contemplative Reptile"
          />
        <CardContent>
          <Typography variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography gutterBottom variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
          <Typography gutterBottom varient="h5" color="Secondary">
            100
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  </Grid>
  <Grid item xs={12} md={4} sx={{ display: 'flex', justifyContent: 'center' }}>
    <Card style={{maxWidth: 345}}>
      <CardActionArea>
        <CardMedia
          style={{height: 140}}
          image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
          title="Contemplative Reptile"
          />
        <CardContent>
          <Typography variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography gutterBottom variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
          <Typography gutterBottom varient="h5" color="Secondary">
            100
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  </Grid>
</Grid>

MUI v4 版本修改示例 #

调整容器属性为justify="center"，同时给Grid item添加内联样式控制内容居中：

<Grid container justify="center">
  <Grid item xs={12} md={4} style={{ display: 'flex', justifyContent: 'center' }}>
    {/* 原有Card内容不变 */}
  </Grid>
  <!-- 其余Grid item按相同规则修改即可 -->
</Grid>

修改后不管是大屏多列排布还是小屏单列排布，Card都会保持居中显示。

内容的提问来源于stack exchange，提问作者S.M