无法在页面的垂直和水平中心对齐react-bootstrap组件

Question

我一直试图将Card组件放置在页面的垂直和水平中心，但是它只能垂直对齐，而不能水平对齐。我曾尝试将容器的高度增加到100 rem，然后在中心对齐项目，但似乎没有任何效果。

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