Сосредоточьте каждый элемент по вертикали в div с помощью начальной загрузки

Question

Я пытаюсь центрировать все внутри этого 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>