“Antd”库中垂直和水平居中组件不起作用答案

【问题标题】：Center component vertically and horizontally in 'Antd' library not working“Antd”库中垂直和水平居中组件不起作用
【发布时间】：2021-11-18 16:50:29
【问题描述】：

我有一个奇怪的问题，我无法在屏幕上垂直居中一行。我拥有的卡片完全水平居中，但不是垂直居中。我怎样才能做到这一点？我使用具有align='middle' 的 Row 组件进行垂直对齐，但它不起作用

这是我的实现：

<Row align='middle' justify='center'>
                <Col span={18}>
                    <Card>
                        {/* <img className='login-logo' src={logo} alt='logo' /> */}
                        <Text size='30px' type='BOLD'>
                            QIFF DASHBOARD
                        </Text>
                        <Form name='login' onFinish={formik.handleSubmit}>
                            <Form.Item>
                                <Input
                                    id='email'
                                    name='email'
                                    label='Email'
                                    placeholder='Email'
                                    type='email'
                                    autoComplete='new-email'
                                    onBlur={formik.handleBlur}
                                    onChange={formik.handleChange}
                                    value={formik.values.email}
                                />
                                {formik.errors.email ? <Text>{formik.errors.email}</Text> : null}
                            </Form.Item>
                            <Form.Item>
                                <Input
                                    id='password'
                                    name='password'
                                    placeholder='Password'
                                    type='password'
                                    autoComplete='new-password'
                                    onBlur={formik.handleBlur}
                                    onChange={formik.handleChange}
                                    value={formik.values.password}
                                />
                                {formik.errors.password ? <Text>{formik.errors.password}</Text> : null}
                            </Form.Item>
                            <div className='submit-button'>
                                <Button
                                    htmlType='submit'
                                    onClick={formik.handleSubmit}
                                    style={{ width: '100%', backgroundColor: '#f85940', color: 'white' }}
                                >
                                    Sign in
                                </Button>
                            </div>
                        </Form>
                    </Card>
                </Col>
            </Row>

【问题讨论】：

@SiddharthVarangaonkar 不幸的是它没有做任何事情

标签： css reactjs antd

【解决方案1】：

<Row align='middle' justify='center'></Row>

大概是Row标签没有设置属性display:flex

所以justify='center' 无效

可以使用以下解决方案：

1、子元素（需要垂直居中）

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

2、<Row style="display:flex"></Row>

【讨论】：

谢谢你这个工作，我还必须添加height: 100vh才能工作
是的，它需要一个高度