如何在Flex容器中仅居中单个元素？附MUI图标对齐问题

核心修改代码 #

export default function CreateGuest() {
  const defaultText = 'Enter a display name'
  const [guestDisplayName, setGuestDisplayName] = useState(defaultText)
  return (
    <Box
      display="flex"
      justifyContent="center"
      margin="auto"
      sx={{
        width: 366,
        height: 386,
        backgroundColor: 'primary.contrastText',
        boxShadow: '0 2px 3px #00000053',
      }}
    >
      <Stack justifyContent="space-evenly" sx={{ width: '100%', px: 2 }}>
        {/* Flex容器替代绝对定位 */}
        <Box display="flex" alignItems="center" sx={{ width: '100%' }}>
          <ChevronLeftIcon
            sx={{
              fontSize: 48,
              color: 'secondary.main',
              cursor: 'pointer',
              // 修复图标隐形方块
              display: 'block',
              padding: 0,
              margin: 0,
            }}
          />
          {/* 文本占满剩余空间并居中 */}
          <Typography
            variant="h3"
            component="pre"
            textAlign="center"
            sx={{ flex: 1, m: 0 }}
          >
            {`Create a\nGuest User`}
          </Typography>
        </Box>
        <TextField
          label={guestDisplayName === '' ? defaultText : guestDisplayName}
          onChange={(e) => setGuestDisplayName(e.target.value)}
          variant="outlined"
          color="info"
          sx={{ width: '100%' }}
        />
        <Button variant="contained">Create Guest</Button>
      </Stack>
    </Box>
  )
}

关键修改说明 #

1. 替换绝对定位为Flex布局

• 用Box做外层Flex容器，通过alignItems: center让图标和文本垂直对齐
• 给文本Typography设置flex: 1，使其占据容器剩余全部空间，配合textAlign: center实现文本始终居中，图标固定在左侧，彻底摆脱绝对定位的复用性问题
• 移除所有绝对定位相关样式

2. 修复MUI图标隐形方块错位

• 给图标添加display: 'block'，消除行内元素默认的间距
• 重置图标padding: 0和margin: 0，清除默认隐形空间
• 给Typography设置m: 0，清除pre标签自带的外边距，避免布局偏移
• 给外层Stack加px: 2，防止图标贴到容器边缘

可选优化 #

如果不需要pre标签的严格换行特性，可将component="pre"替换为默认的div，并添加whiteSpace: 'pre-line'实现换行，进一步减少样式冲突：

<Typography
  variant="h3"
  textAlign="center"
  sx={{ flex: 1, m: 0, whiteSpace: 'pre-line' }}
>
  Create a
  Guest User
</Typography>

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