MUI技术疑问：Flex容器内图片已垂直居中，为何未水平对齐？

你的代码已通过alignItems: 'center'实现垂直居中，但缺少水平方向的对齐配置，按以下方式修改即可：

步骤1：让Container在Box中水平居中 #

给外层Box的sx配置添加justifyContent: 'center'——flex容器的justifyContent属性控制主轴（默认水平方向）的元素对齐，添加后子元素Container会在水平方向居中。

步骤2：让图片在Container中水平居中 #

Container默认是块级元素，内部图片会左对齐，给Container添加sx配置，将其设置为垂直方向的flex容器并开启水平居中：

sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}

修改后的完整代码 #

<Box
  sx={{
    display: 'flex',
    minHeight: '100vh',
    alignItems: 'center',
    justifyContent: 'center', // 新增：水平居中Container
    flexGrow: 1,
  }}>
  <Container 
    maxWidth="sm"
    sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }} // 新增：让内部元素水平居中
  >
    <img 
      src="https://static.vecteezy.com/system/resources/previews/001/200/294/original/house-png.png"
      width={200}
      alt="img"
    />
    <LinearProgress sx={{ mt: 4, width: '100%' }} /> {/* 可选：让进度条占满Container宽度 */}
  </Container>
</Box>

补充说明 #

• 外层Box的justifyContent: 'center'确保整个Container在页面视口水平居中；
• 内层Container的flexDirection: 'column'让图片和进度条垂直排列，alignItems: 'center'让内部元素在Container范围内水平居中；
• 给LinearProgress添加width: '100%'可以让进度条铺满Container宽度，避免和图片一样居中过窄。

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