Vertical center inside columns in bootstrap4

Question

I am new to bootstrap, I am working on a simple project. What I need is that I need my heading inside col-md-6 to be vertically centered.

Here is my Code:

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

I have tried .flex-md-middle, .align-middle , .vertical-center , .align-self-center BUT nothing is working.

Any idea how to achieve this ?