如何使用 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="center" align="middle"），您的表單位於行的中心，但沒有高度（添加高度：100%）`。