Реакция: Вертикальный центр Bootstrap Контейнерный компонент на экране - PullRequest
0 голосов
/ 21 марта 2020

У меня есть форма входа в систему с использованием компонента Container от Bootstrap. Как выровнять по вертикали весь контейнер по центру экрана?

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>
  );
}

Problem screenshot

...