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

Posted 2023-03-07

【中文标题】如何使用 Antd 在网页/浏览器中居中登录表单？

【英文标题】：How to center login form in web page/browser using Antd?

【发布时间】：2019-05-25 14:31:29

【问题描述】：

电流输出：

<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 内联样式，但我不想这样。

【参考方案1】：

确保你的行占据整个页面

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

输出如下所示：

【讨论】：

很好解释！

【参考方案2】：

这完全取决于你父母的身高。使用这些道具（type="flex" justify="center" align="middle"），您的表单位于行的中心，但没有高度（添加高度：100%）`。