javascript - 修复：如何将已经居中的 Flex 的中间项目居中

Question

中间项目不能居中

代码

<Flex position="relative" p={2} display={{base: "none", md: "flex"}} backgroundColor="#022e57" justifyContent="space-between" alignItems="center">
    <Box >
        {userData ? <UserData props={userData}/> : <Heading ml={4} color="white">Noobs</Heading>}
    </Box>
    <Box>
        <Button colorScheme="grey">
            Home
        </Button>
        <Button colorScheme="grey">
            Lịch sử
        </Button>
        <Button colorScheme="grey">
            Chúng tôi
        </Button>
    </Box>
    <Box mr="3rem">
        {userData ? 
            <Button colorScheme="red" onClick={LogOut}> 
                Thoát 
            </Button> : 
            <Link href="http://localhost:3001/api/auth/discord" _hover={null}>
                <Button colorScheme="green">
                    Đăng nhập
                </Button>
            </Link>
        }
    </Box>
</Flex>

问题

我如何将<Box>带有3 个按钮的居中居中，因为设计看起来有点垃圾