bootstrap4中列内的垂直中心

Question

我是bootstrap的新手，我正在开发一个简单的项目。我需要的是我需要col-md-6内的标题垂直居中。

这是我的代码：

HTML

<div class="container-fluid main_container">
    <div class="row inside_main_container">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 homepage_container pink darken-1">
            <h1> i lost something </h1>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 homepage_container deep-purple darken-1">
            <h1> i found something </h1>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 homepage_container teal darken-1">
            <h1> show me what's lost </h1>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 homepage_container light-blue darken-1">
            <h1> show me what's found </h1>
        </div>
    </div>
</div>

CSS

.main_container {
    width:100%;
    height: 100%;
    margin: -60px 0 -40px;
    padding: 60px 0 40px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.inside_main_container {
    margin: 0 !important;
    width:100%;
    overflow:auto;
    height:100%;
}
.homepage_container {
    width:100%;
    height: 50% !important;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.homepage_container h1 { 
    text-transform: uppercase;
}

我已尝试.flex-md-middle, .align-middle，.vertical-center，.align-self-center但没有任何效果。

知道如何实现这个目标吗？