为何Mui Container未按描述实现内容水平居中？

按照MUI官方文档中Container组件的示例编写代码后，发现Container并未将内部的Button和Box组件水平居中，必须额外添加display:flex和align-content:center样式才能实现居中效果，这与文档描述不符，请问原因是什么？

代码示例 #

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import { Button } from '@mui/material';

export default function SimpleContainer() {
  return (
    <React.Fragment>
      <CssBaseline />
      <Container maxWidth="sm">
        <Button variant='contained'>Button</Button>
        <Box sx={{ bgcolor: '#cfe8fc', height: '100vh', width: 200 }} />
      </Container>
    </React.Fragment>
  );
}

效果对比截图 #

• 未添加额外样式时的效果：
  
• 添加flex样式后的居中效果：
  

MUI的Container组件核心功能是限制内容的最大宽度，并通过左右自动margin让容器自身在页面中水平居中，但它并不会自动处理内部元素的对齐逻辑——内部元素默认遵循常规文档流布局：块级元素占满容器宽度，行内/行内块元素左对齐。

官方文档示例中看起来内容居中，是因为示例里的内部元素本身做了居中处理：比如用了默认文本居中的Typography组件，或者嵌套了设置了textAlign: 'center'、display: 'flex' + justifyContent: 'center'样式的Box，只是你没留意这些细节。

要让Container内部元素水平居中，有两种常用简洁方式：

1. 直接给Container添加布局样式：

<Container maxWidth="sm" sx={{ textAlign: 'center' }}>
  <Button variant='contained'>Button</Button>
  {/* 对于固定宽度的块级元素，需要额外加margin: 0 auto实现居中 */}
  <Box sx={{ bgcolor: '#cfe8fc', height: '100vh', width: 200, margin: '0 auto' }} />
</Container>

2. 嵌套Box统一处理内部布局：

<Container maxWidth="sm">
  <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
    <Button variant='contained'>Button</Button>
    <Box sx={{ bgcolor: '#cfe8fc', height: '100vh', width: 200 }} />
  </Box>
</Container>

本质上，Container只负责自身在页面中的居中定位，内部元素的对齐需要你额外通过布局属性控制，这和文档的设计逻辑一致，只是你误解了示例的实现细节。

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