MUI按钮无法水平居中排列，如何实现行内均匀间隔居中效果

问题根因 #

你遇到的问题来自两个明显的配置疏漏：

• 没有给外层Box设置足够的宽度，默认Box宽度为内容自适应，flex布局的justifyContent属性仅在父容器存在剩余可用宽度时才会生效，没有剩余空间的情况下所有按钮自然会挤在容器左侧
• 你的需求是按钮整体居中排列，用justifyContent="space-between"本身不符合需求，该属性是让子元素在容器内两端贴边、均匀分散对齐，和你要的居中效果不匹配

解决方案 #

方案1：调整现有Flex配置即可实现 #

修改Box的属性如下：

<Box 
  display="flex" 
  justifyContent="center" 
  gap={2} 
  width="100%"
>
  {/* 按钮组件放此处 */}
</Box>

gap属性控制按钮之间的间距，数值对应MUI主题的间距单位，默认gap={2}为16px，可根据需求调整大小；如果你需要按钮占满整行均匀分布，再把justifyContent改回space-between即可。

方案2：使用MUI原生Stack组件更简洁 #

MUI提供了专门用于同级元素线性布局的Stack组件，不需要手动写flex基础属性：

<Stack 
  direction="row" 
  spacing={2} 
  justifyContent="center"
  width="100%"
>
  {/* 按钮组件放此处 */}
</Stack>

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