Material UI V5如何实现Grid容器内的Grid子元素居中对齐

云原生阿岚

2026-9-28

MUI v5 Grid容器子元素居中方案

MUI v5 并未移除Grid组件的justifyContent、alignItems相关属性，你遇到的失效问题通常是两个原因导致：要么仅设置了Grid容器的对齐规则，未处理Grid item内部元素的对齐逻辑；要么是需要垂直居中时，Grid父容器未设置明确高度，没有垂直方向的对齐参照空间。

你可以按以下方式修改代码实现居中效果：

方案1：使用Grid原生prop（写法最简洁）

<Container
    maxWidth='lg'
    style={{ marginTop: "30px", marginBottom: "30px" }}
  >
   {/* 若需要垂直居中，可在此处加alignItems="center"，同时给Container设置固定高度即可生效 */}
   <Grid container spacing={4} justifyContent="center">
        {cards &&
          cards.map((item) => {
            return (
              {/* 给每个Grid item添加flex布局属性，控制内部Card居中 */}
              <Grid item xs={12} sm={6} md={4} key={item._id}
                display="flex"
                justifyContent="center"
                alignItems="center"
              >
                <Card style={{ maxWidth: "350px" }}>
                  //Card组件内部代码
                </Card>
              </Grid>

            );
          })}
      </Grid>
</Container>

方案2：通过sx属性配置（支持响应式自定义）

如果需要复杂的响应式对齐规则，可以把布局逻辑放在sx属性中实现：

<Grid container spacing={4}
  sx={{
    justifyContent: "center",
    // 响应式示例：屏幕宽度小于600px时改为左对齐
    "@media (max-width: 600px)": {
      justifyContent: "flex-start"
    }
  }}
>
  <Grid item xs={12} sm={6} md={4}
    sx={{
      display: "flex",
      justifyContent: "center"
    }}
  >
    <Card style={{ maxWidth: "350px" }}>
      //Card组件内部代码
    </Card>
  </Grid>
</Grid>