Antd库Row组件设置align='middle'实现垂直居中失效如何解决？

问题根因 #

Ant Design 的 Row 组件默认高度由内部子元素高度撑开，align="middle" 属性仅能实现 Row 内部元素在 Row 自身高度范围内的垂直居中，当 Row 自身高度未铺满整个屏幕视口高度时，自然无法实现相对于屏幕的垂直居中效果。

修复方案 #

直接给 Row 组件添加样式，将其最小高度设置为全屏视口高度即可，修改后的代码如下：

<Row align='middle' justify='center' style={{ minHeight: '100vh' }}>
  <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>

适配注意事项 #

• 若 Row 外层还有嵌套的父容器，需要确保所有父级容器以及 html、body 标签都已设置height: 100%，否则100vh可能无法正常生效
• 若页面存在固定高度的头部、底部导航等元素，可通过calc函数调整高度：style={{ minHeight: 'calc(100vh - 固定元素总高度)' }}
• 若设置后出现多余滚动条，可将minHeight替换为height属性适配场景

内容的提问来源于stack exchange，提问作者warCommander