Как выровнять блок по вертикали, если высота внешнего блока неизвестна?

Question

Есть верстка с хедером и мейном. Высота мейна заранее неизвестна, и вычисляется браузером на лету. Внутри мейна есть див. У дива заданы четкие размеры. Требуется выровнять див по вертикали, чтобы он был по середине мейна. Как это сделать?

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

header {
  height: 88px;
  width: 100%;
  background-color: rgb(138, 138, 151);
}

main {
  position: relative;
  display: flex;
  justify-content: center;
}

.content {
  width: 1000px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: rgb(221, 193, 67);
}

<div class="container">
  <header></header>
  <main>
    <div class="content">контент для выравнивания</div>
  </main>
</div>

Результат, который я хочу получить:

Answer 1

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

header {
  height: 88px;
  width: 100%;
  background-color: rgb(138, 138, 151);
}

main {
  display: flex;
  justify-content: center;
}

.content {
  width: 1000px;
  height: 200px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  background-color: rgb(221, 193, 67);
}

<body>
  <div class="container">
    <header></header>
    <main>
      <div class="content">контент для выравнивания</div>
    </main>
  </div>
</body>

Answer 2

А так пробовали?

Добавьте эти свойства, А так пробовали? если правильно понял то так можно!!!

БЛОГ НА HUSL

Как выровнять блок по вертикали, если высота внешнего блока неизвестна?

Ответы (2 шт):