如何在CSS与MUI中将按钮置于边框之间的居中位置？

要实现按钮居中放置在水平分隔线上的效果，结合你使用的Material-UI框架，推荐采用Flex容器+分隔线元素的方案，既符合Material-UI设计规范，又能保证布局的自适应和可维护性。

核心思路 #

通过一个Flex容器同时容纳左右两条分隔线和中间的按钮：

1. 用两个占满剩余空间的Box元素作为左右分隔线，高度设为1px，复用Material-UI主题的分隔线颜色
2. 按钮居中放置在两个分隔线之间，通过左右间距拉开与分隔线的距离，并设置按钮背景色与页面背景一致，遮挡后方的分隔线，形成“按钮嵌在分隔线上”的视觉效果

修改后的完整代码 #

<MainContainer>
  <Stack spacing={1}>
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography
          sx={{ fontSize: 14 }}
          color="text.secondary"
          gutterBottom
        >
          Word of the Day
        </Typography>
        <Typography variant="h5" component="div">
          be{bull}nev{bull}o{bull}lent
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          adjective
        </Typography>
        <Typography variant="body2">
          well meaning and kindly.
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
    </Card>
  </Stack>
  {/* 替换原有按钮容器为以下代码 */}
  <Box 
    sx={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      marginY: 2, // 上下间距，可按需调整
    }}
  >
    {/* 左侧分隔线 */}
    <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
    <Button 
      variant="contained" 
      color="primary" 
      sx={{
        marginX: 2, // 按钮与左右分隔线的间距
        minWidth: 50,
        bgcolor: 'background.paper', // 与页面背景色一致，遮挡后方分隔线
        '&:hover': {
          bgcolor: 'primary.main' // 保留按钮hover时的主题颜色
        }
      }}
    >
      Hello
    </Button>
    {/* 右侧分隔线 */}
    <Box sx={{ flex: 1, height: 1, bgcolor: 'divider' }} />
  </Box>
</MainContainer>

方案优势 #

• 主题一致性：使用Material-UI内置的divider、background.paper等颜色变量，确保和整体设计风格统一
• 自适应布局：分隔线会自动填充容器剩余宽度，适配不同屏幕尺寸
• 代码简洁易维护：通过Flex布局实现，逻辑清晰，无需复杂的定位计算

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