使用引导程序将 div 中的每个项目垂直居中

Question

我试图将这个 div 中的所有内容垂直居中。

首先，我让我的背景视图在屏幕上很好地扩展了我的容器，现在我想在那个 div 中创建列。 如果我制作列，则position:relative不起作用。

<div class="container">
    <div class="top_block">
        <div class="row">
            <div class="col-md-4">
                <h3 class="">My Website</h3>
            </div>
            <div class="col-md-8">
                Other Content
            </div>
        </div>

    </div>
</div> 

社会保障局

.top_block {

    height: 50px;
    background-color: rgba(33,35,38,1);


    &::before {
        content: "";
        height: inherit;
        width: 10000px;
        position: absolute;
        z-index: -1;
        background-color: rgba(33,35,38,1);
        left: -2000px;

    }

    h3 {
        color:white;


    }
}

Answer 1

 .container { height: 100vh; background-color: DodgerBlue; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; flex-wrap: wrap; }

 <div class="container"> <div class="row"> <div class="col-md-4"> <h3 class="">My Website</h3> </div> <div class="col-md-8"> Other Content </div> </div> </div>