如何在网页/浏览器中使用Antd居中登录表单？

Question

当前输出：

​

<Row type="flex" justify="center" align="center">
    <Col span={4} >
      <form onSubmit={handleSubmit(this.handleSubmit)} >
        <Field
          style={{ marginBottom: 12 }}
          prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
          name="name"
          type="text"
          component={AInput}
        />
        <Field
          style={{ marginBottom: 12 }}
          className="form-group"
          prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
          name="password"
          type="password"
          component={AInput}
          />

          <Button

            block
            type="primary"
            htmlType="submit"
            className="login-form-button"
          >
            Log in
          </Button>
      </form>
    </Col>
  </Row>

上面的登录表单需要以网页为中心，我尝试了使用antd样式元素，但失败了。它将使用css内联样式，但我不想以这种方式。

Answer 1

确保您的行占满整个页面

<Row type="flex" justify="center" align="middle" style={{minHeight: '100vh'}}>

输出如下所示：

​

Answer 2

这完全取决于你父母的身高。使用这些道具(type=“flex”justify=“中心”align=“中间”)，您的表单位于行的中心，但没有高度(添加高度: 100%)`。