Выравнивание содержимого адаптивных DIV

Question

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

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

.wrap {
  width: 100%;
  display: table;
  background: pink;
  margin-top: 10px;
  margin-bottom: 10px;
}

.col1 {
  width: 50%;
  float: left;
  height: 500px;
}

@media only screen and (max-width: 500px) {
  .col1 {
    width: 100%;
    float: left;
    height: 50px;
  }
}

.col2 {
  width: 50%;
  float: left;
  height: 500px;
}

@media only screen and (max-width: 500px) {
  .col2 {
    width: 100%;
    float: left;
    height: 100px;
  }
}

.outer {
  width: 100%;
  height: 500px;
  position: relative;
  text-align: center;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

<div class="wrap">
  <div class="col1">
    <div class="outer">
      <div class="inner">
        <h1>I'm Centered</h1>
      </div>
    </div>
  </div>
  <div class="col2">
    <div class="outer">
      <div class="inner">
        <h1>I'm Centered Too</h1>
      </div>
    </div>
  </div>
</div>

Задача состоит в том, чтобы настольная версия выглядела так;

А чтобы мобильная версия выглядела так;

Должен быть способ сделать это лучше, даже если я заключил еще один DIV в заголовок? Границы предназначены только для отображения каждого col. Приветствуются любые ответы. Этот вопрос следует из предыдущего, но не задает того же самого, поэтому я создал новый вопрос.

Answer 1

используйте вместо этого display flex для тега wrap и управляйте свойством flex direction (по умолчанию - row):

.wrap {
  display: flex;

  @media only screen and (max-width: 500px) {
    flex-direction: column;
  }
}

для дочернего div вы можете установить flex-grow: 1; для равномерного распределения пробелов плюс вы можете легко центрировать свой контент с помощью гибкого дисплея, а также:

.child {
  flex-grow: 1; // this property is set on display flex element's child
  // below how to center content with display flex
  display: flex;
  justify-content: center;
  align-items: center;
}

подробнее об этом: css flex

вы можете проверить пример здесь кодовое поле