Center component vertically and horizontally in 'Antd' library not working - css

Question

I have a weird issue where I can't center a Row vertically in my screen.
The Card I have is perfectally centered horizontally but not vertically. How can I do that ?
I used the Row component which has align='middle' to align vertically but it isn't working
Here is my implementation:
<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>

Answer 1

<Row align='middle' justify='center'></Row>
Presumably, the Row tag does not set the attribute display:flex
So justify='center' is invalid
The following solutions can be used：
1、Child element (Need to be centered vertically)
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2、 <Row style="display:flex"></Row>