How to center login form in web page/browser using Antd?

Question

Current output:

<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>

above login form need to center in web page, i tried it using antd styling elements but failed. it would be using css inline styling but i do not want to this way.

Answer 1

Make sure your row takes the whole page

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

Output looks like this: