Bootstrap Flex垂直中心不起作用

Question

我正在尝试将容器垂直和水平居中放置。 我尝试对Bootstrap 4使用flexbox实用工具类，但是我做错了什么或缺少了什么。我的容器水平居中，但不垂直。

这是我的代码

<div class="container h-100">
<div class="d-flex align-items-center justify-content-center">
    <div class="jumbotron text-center">
        <h1 class="display-4">Title</h1>
        <p class="lead">Write something here</p>
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#myModal" id="modalOpener" data-toggle="modal" role="button">Enter</a>
        </p>
    </div>
</div>

我也尝试将margin auto添加到项目中，并将justify-content-center添加到容器中，因为一些类似的问题将它们作为正确答案，但没有任何改变。