React应用中如何居中包含Card子组件的Material-UI Grid元素

我完全懂你的困扰——看着卡片好像在屏幕中间，但总觉得没真正对齐，这大概率是Grid的布局属性用错地方啦，咱们来快速修正：

问题核心 #

Material-UI的Grid组件里，justify（控制水平对齐）这类布局属性只能作用在Grid container上，你现在把justify="center"加在了Grid item标签上，这根本不会生效哦。那个包裹卡片的外层Grid，本身得是个container，才能控制内部子元素的对齐逻辑。

具体修正步骤 #

1. 把原来的 <Grid item xs={6} justify="center"> 改成 <Grid container xs={6} justify="center">——这样它既是父Grid的item（占据6列宽度），又能作为容器控制内部卡片的居中对齐。
2. 内部的Grid item xs={12}保持不变，它们负责承载Card组件，是container的合法子项。

修改后的完整代码 #

render() {
 return (
  <Grid container>
   <Grid item xs={12}>
    <Typography variant="h3" gutterBottom>
     My Projects
    </Typography>
   </Grid>
   {/* 这里改为container并添加justify=center */}
   <Grid container xs={6} justify="center">
    <Grid item xs={12}>
     <Card>
      <CardMedia component="img" height="140" image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/spotter.png?raw=true" alt="Spotter" />
      <CardContent>
       <Typography gutterBottom variant="h5" component="div">
        Spotter
       </Typography>
       <Typography variant="body2" color="text.secondary">
        Spotter is an easy-to-use Spotify music controller with functioning room and voting systems.
       </Typography>
      </CardContent>
      <CardActions>
       <Button size="small" color="primary" to="/project/spotter" component={Link} >
        Read More
       </Button>
      </CardActions>
     </Card>
    </Grid>
    <Grid item xs={12}>
     <br />
    </Grid>
    <Grid item xs={12}>
     <Card>
      <CardMedia component="img" height="140" image="https://github.com/dbarnes18/Portfolio/blob/master/assets/images/impulse.png?raw=true" alt="Spotter" />
      <CardContent>
       <Typography gutterBottom variant="h5" component="div">
        Impulse
       </Typography>
       <Typography variant="body2" color="text.secondary">
        Impulse is a macOS Virtual/Voice Assistant!{" "}
        <i>Impulse is a little buggy and slow.</i>
       </Typography>
      </CardContent>
      <CardActions>
       <Button size="small" color="primary" to="/project/impulse" component={Link} >
        Read More
       </Button>
      </CardActions>
     </Card>
    </Grid>
   </Grid>
  </Grid>
 );
}

可选优化 #

如果你希望整个包含卡片的区域在页面上完全水平居中，还能给最外层的Grid container也加上justify="center"属性，这样标题和卡片容器都会整体居中：

<Grid container justify="center">
  {/* 内部内容保持不变 */}
</Grid>

调整之后，你的卡片就能真正精准居中啦！

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