如何使用内联样式水平和垂直居中 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>
    );
};

Answer 1

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

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

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

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

How to Center React Component Horizontally and Vertically Using Inline Styles

javascript

css

inline-styles

reactjs

react-bootstrap