如何在react-bootstrap中居中对齐容器组件的内容？

Question

我的容器组件如下所示：

<Container className="contact-content debug-border">
    <Row className="justify-content-center">
        <Col md={2} className="text-center text-md-right">
            Phone:
        </Col>
        <Col md={3} className="text-center text-md-left">
            XXXXXXXXX
        </Col>
    </Row>
    <Row className="justify-content-center">
        <Col md={2} className="text-center text-md-right">
            Email-ID:
        </Col>
        <Col md={3} className="text-center text-md-left">
            XXXXXXXXXXX
        </Col>
    </Row>
</Container>

我的CSS如下：

.contact-content{
    height: 83vh;
}

.debug-border{
    border: 2px;
    border-style: dashed;
}

它看起来是这样的： 我想要的是电话和电子邮件数据的行和列显示在页面中间

我尝试过的：

我尝试向容器添加类：

• 对齐内容中心
• 对齐项目中心
• 内容居中对齐
• 项目中间对齐
• 中间对齐
• 我的汽车
• py自动

它对网页的外观没有任何影响。

我将 padding:40vh 添加到 contact-content css 类中，它起作用了，但我想知道 bootstrap 中是否有任何类可以将容器内的行和列与页面中间对齐。