Невозможно выровнять компонент реакции-начальной загрузки по центру страницы по вертикали и горизонтали

Question

Я пытался разместить компонент Card в вертикальном и горизонтальном центре страницы, но он выравнивается только вертикально, а НЕ горизонтально.Я попытался увеличить высоту контейнера до 100 бэров, а затем выровнять элементы по центру, но, похоже, ничего не работает.

<div>
    <Container className="display-flex">
    <Row className="justify-content-center">
    <Col className="align-item-center">
    <Card style={{ width: '19rem'}}>
    <Card.Header> Mark Attendence </Card.Header>
    <Card.Body> </Card.Body>
   </Card>
    </Col>
    </Row>
    </Container>
</div>