Как расположить нижний блок по центру оставшейся области?

Question

[Сергей К]

Как расположить нижний блок по центру оставшейся области? Без указания этого в пикселях, так как главный блок всегда будет менять свой размер.
Вот код:

<div class="header">
  <div class="up"><h1>Текст сверху</h1></div>
  <div class="down"><h3>Текст снизу</h3></div>
</div>

.header{
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  padding: 10px;
  height: 300px;
}
.up, .down{
  border: 1px solid black;
  padding: 10px;
}

https://codepen.io/sergej-korolew/pen/oVbYPW

Comments

[WapSter]

не совсем ясно, он у тебя и так по центру

Answer 1

[Rustam Bainazarov]

Обёртка нужна ещё одна.

Comments

[Сергей К]

спасибо