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

Question

我正在尝试使用内联样式在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',
                    alignItems: 'center',
                    justifyContent: 'center',
                    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',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginTop:'5px'
                }}
            >
                <Button type='submit' onClick={submitApiKey} size='sm'>
                    Submit
                </Button>
            </Row>
        </Container>
    );
};

- clattenburg cake

---

我认为你应该将 Row 包装在一个 div 中，然后在 div 上设置样式。 - sandrooco

Answer 1

为了竖直居中，您需要将容器（Container）的内联样式设置为以下内容：

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

完成这一步后，您可能可以删除所有其他样式。

- Ivo