Material-UI与React按钮居中：消除线条及优化实现方案问询

1. 按钮线条问题的根源 #

你看到的线条是因为position: absolute让按钮脱离了正常文档流，导致它和下方元素（比如卡片边框）发生视觉重叠，出现类似“双重边框”的效果。设置background-color: white只是用背景盖住了重叠部分，并非从根源解决问题。

2. 更优的居中实现（无需position: absolute） #

MUI的Stack组件本身就是基于Flexbox的布局容器，完全可以利用Flex原生属性实现居中，不需要依赖绝对定位。优化后的代码如下：

<Stack alignItems="center" sx={{ marginTop: 2 }}>
  <Button variant="outlined">Hello There</Button>
</Stack>

代码说明 #

• alignItems="center"：在Stack默认的垂直方向（direction="column"）下，这个属性会让所有子元素水平居中，完全满足你的需求。
• 移除position: absolute、display: flex（Stack本身已经是flex容器）、left: 0和right: 0这些冗余属性，让按钮回到正常文档流中，彻底避免元素重叠导致的线条问题。
• 如果你的布局需要按钮在某个容器内水平居中，只需确保Stack的父容器是块级元素（默认就是），alignItems="center"就能直接生效。

额外优化建议 #

如果需要让按钮在父容器中同时实现水平+垂直居中，可以给Stack添加justifyContent="center"并设置父容器的高度：

<Stack 
  alignItems="center" 
  justifyContent="center" 
  sx={{ 
    marginTop: 2,
    height: "100%" // 需确保父容器有明确高度
  }}
>
  <Button variant="outlined">Hello There</Button>
</Stack>

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