垂直和水平反应中心页面

Question

嗨，我是新手，现在我正在努力使页面垂直和水平居中。到目前为止，我只能将其垂直居中，而不能水平居中，如附图所示。

我的代码。

function HomePage() {
    const navigate = useNavigate();

    const handleNavigate = (path) => {
        navigate(path);
    };

    return (
        <Box sx={{
            flexGrow: 1,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
        }}>
            <HomeAppBar />

            <Container component="main" maxWidth="lg" sx={{
                textAlign: 'center',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100%',
            }}>
                <Typography variant="h2" component="h1" gutterBottom>
                    WILLKOMMEN ZURÜCK!
                </Typography>

                <Box sx={{
                    display: 'flex',
                    justifyContent: 'center',
                    gap: 2,
                    mb: 4,
                }}>
                    {/* Buttons with icons */}
                    <Button
                        variant="contained"
                        startIcon={<FitnessCenterIcon />}
                        onClick={() => handleNavigate('/gym-login')}
                        sx={{ borderRadius: 10, paddingY: 3 }}
                    >
                        Für Studios
                    </Button>
                    <Button
                        variant="contained"
                        startIcon={<CameraAltIcon />}
                        onClick={() => handleNavigate('/photographer-login')}
                        sx={{ borderRadius: 10, paddingY: 3 }}
                    >
                        Für Fotografen
                    </Button>
                </Box>

                <Typography variant="body1" gutterBottom>
                    DU MÖCHTEST SICHTBAR WERDEN?
                    <br />
                    JETZT GRATIS 1 MONAT TESTEN!
                </Typography>
            </Container>
        </Box>
    );

}

export default HomePage;

感谢您的帮助。

我尝试将页面水平和垂直居中，但到目前为止只能垂直居中

Answer 1

使用弹性盒，您可以将具有定义的宽度和高度参数的任何内容居中。这是一个例子：

React.js：

return (
    <div className="section flex col">
        <div className="content"></div>
    </div>
)

CSS：

html {
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    overflow: auto;
}
body { 
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    z-index: 0;
}
.section {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100% !important;
}
.flex.col {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.content {
    width: 400px;
    height: 400px;
    border: 1px solid black;
}