flexbox - 无法在页面的垂直和水平中心对齐 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>