如何使用内联样式将 React 组件水平和垂直居中

问题描述

我正在尝试使用内联样式在 React JS 中将基本用户登录居中，但我似乎不知道该怎么做。我正在使用 React Bootstrap，目前我已经设法使用 flexbox 使表单部分居中，但它仍然出现在页面顶部。我需要做什么才能让它出现在中间？

请参阅当前问题的附加图片。

const LoginPage = () => {

    return (
        <Container >
            <Row
                style={{
                    display: 'flex',alignItems: 'center',justifyContent: 'center',marginTop:'5px'
                }}
            >
                Enter API Key:
            </Row>
            <Row
                style={{
                    display: 'flex',marginTop:'5px'
                }}
            >
                <Form>
                    <Form.Control
                        id='apiKeyString'
                        name='apiKey'
                        size='sm'
                        style={{ width: '250px' }}
                        onChange={(e) => setApiKey(e.target.value)}
                    ></Form.Control>
                </Form>
            </Row>
            <Row
                style={{
                    display: 'flex',marginTop:'5px'
                }}
            >
                <Button type='submit' onClick={submitApiKey} size='sm'>
                    Submit
                </Button>
            </Row>
        </Container>
    );
};

解决方法

要垂直居中，您必须将容器内联样式设置为以下内容：

{
height: '100vh',display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center',}

完成此操作后，您可能可以删除所有其他样式。