如何在Material-UI布局中实现Grid项的垂直居中对齐

你当前的代码无法实现居中的核心原因，是混淆了Grid容器不同方向下的对齐属性适用场景，导致带固定栅格宽度的内容块默认靠左排布，剩余宽度全部堆在右侧，没有形成视觉上的居中效果。

核心对齐逻辑梳理 #

Material-UI的Grid对齐规则是和容器的主轴方向强绑定的，搞清楚对应关系就不会用错属性：

• 当容器设置direction="column"时，主轴为垂直方向：
  • justifyContent 控制子元素在垂直方向的排布位置
  • alignItems 控制子元素在水平方向的排布位置
• 当容器设置direction="row"时，主轴为水平方向：
  • justifyContent 控制子元素在水平方向的排布位置
  • alignItems 控制子元素在垂直方向的排布位置

你原代码的问题点：承载两个文本块的容器是direction="column"，但没有设置alignItems属性，默认值alignItems="stretch"会将所有子元素拉伸至交叉轴全宽，哪怕给子元素设置了xs={11}的栅格宽度，剩下的1份宽度也会全部堆在内容块右侧，无法实现左右均匀留白的居中视觉。

可直接复用的修正代码 #

仅需要在内容区容器上补充一行alignItems="center"属性，即可实现所有栅格块的水平居中效果，可搭配少量基础样式优化页面观感：

<Grid container direction="column" sx={{ minHeight: '100vh' }}>
  {/* 顶部通栏AppBar 原有结构无需修改 */}
  <Grid item>
    <AppBar position="static">
      <Toolbar>MY APP</Toolbar>
    </AppBar>
  </Grid>

  {/* 内容区容器 补充居中属性+基础优化样式 */}
  <Grid 
    item 
    container 
    direction="column"
    alignItems="center"
    sx={{ flex: 1, gap: 2, p: 2 }}
  >
    <Grid item xs={11}>
      Some text
    </Grid>
    <Grid item xs={11}>
      Some text
    </Grid>
  </Grid>
</Grid>

代码中的alignItems="center"就是实现水平居中的核心配置，设置后无论子元素设置多少栅格宽度，都会自动在水平方向居中，左右两侧均匀分配剩余宽度。

常见踩坑提醒 #

• 不要单独给每个内容块加mx="auto"实现居中：这种方式虽然能达到效果，但和Grid的栅格体系逻辑割裂，后续做多断点宽度适配时维护成本很高，直接在父容器设置对齐属性更符合MUI的设计规范
• 如果需要让内容块在垂直方向也居中，只需要在上述内容区容器上追加justifyContent="center"属性即可
• 后续调整不同断点下的内容块宽度时，直接在子item上修改xs/sm/md的栅格值就行，父级的居中逻辑不需要改动，会自动适配新的宽度

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