使用引导程序将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> 

SCSS

.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>