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

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

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

我尝试了什么：

我尝试将类添加到容器中：

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

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

我在 contact-content css 类中添加了 padding:40vh 并且它有效，但我想知道引导程序中是否有任何类可以将容器内的行和列与页面中间对齐。

标签： cssreactjsbootstrap-4css-positionreact-bootstrap