Выравнивание по вертикали для div, опция таблицы не работает

Question

Я знаю, что есть много похожих вопросов, но я прочитал пару и до сих пор не могу найти решение своей проблемы. Я пытаюсь скопировать первую страницу Google и не могу выровнять основной контент.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.nav-bar {
  font-family: arial, sans-serif;
  font-size: 13px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 30px;
  margin-top: 15px;
}

.nav-bar>a {
  text-decoration: none;
  color: black;
}

.nav-bar>a+a {
  margin-left: 15px;
}

#account-nav-link {
  background-color: #006666;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  color: white;
}

.main-google {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<script src="https://kit.fontawesome.com/8370b7a799.js" crossorigin="anonymous"></script>

<nav class="nav-bar">
  <a href="#">Gmail</a>
  <a href="#">Images</a>
  <a href="#"><i class="fab fa-buromobelexperte fa-lg"></i></a>
  <a href="#" id="account-nav-link">S</a>
</nav>
<main class="main-google">
  <div class="content">
    <div class="img-div">
      <img src="google.png" />
    </div>
    <div class="search-box">
      <i class="fas fa-search"></i>
      <input type="text" />
      <i class="fas fa-microphone"></i>
    </div>
    <div class="search-buttons">
      <button>Google Search</button>
      <button>I'm Felling Lucky</button>
    </div>
    <div class="lang-div">
      <span>Google offered in:</span>
      <a href="#">Romana</a>
      <a href="#">magyar</a>
      <a href="#">Deutsch</a>
    </div>
  </div>
</main>

Я также попытался сделать main-google таблицей, а содержимое таблицы - ячейкой и использовать вертикальное выравнивание: middle

Можете ли вы объяснить css код, необходимый для вертикального выравнивания на основе моего примера? Ty

Answer 1

Обновите .main-google css ниже: вы можете взять ссылку из этой скрипки (согласно вашему коду): https://jsfiddle.net/harshapache/rnL6t0a7/

.main-google {
 position: relative;
 height: calc(100vh - 50px);
 display: flex;
 justify-content: center;
}