css - React：在屏幕上垂直居中 Bootstrap Container 组件

Question

我有一个使用 Bootstrap 的 Container 组件的登录表单。如何在屏幕中心垂直对齐整个容器？

function Auth() {
  return (
    <Container >

      <Row className="justify-content-center">
        <Col  sm={6}>
          <Card >
            <Card.Body>
              <Form>
                <Form.Group controlId="formBasicEmail">
                  <Form.Label>Username</Form.Label>
                  <Form.Control type="text" placeholder="Username" />
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                  <Form.Label>Password</Form.Label>
                  <Form.Control type="password" placeholder="Password" />
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                  <Form.Check type="checkbox" label="Check me out" />
                </Form.Group>
                <Button variant="primary" type="submit">
                  Login
                </Button>
              </Form>
            </Card.Body>
          </Card>
        </Col>
      </Row>

    </Container>
  );
}

标签： cssreactjsgridcomponentsreact-bootstrap