视频列高匹配[重复]

Question

我有一个两列部分，一侧包含视频，另一侧包含文本。

它们都是 50% 的宽度，我希望它们具有相同的高度，因为它们一起向下响应

section {
  width: 1000px;
}

.half {
  width: 50%;
  position: relative;
  float: left;
}

.grey {
  background: #f5f5f5;
}

<section>
  <div class="half grey one">
    <p>text goes here.</p>
  </div>
  <div class="half">
<iframe  src="https://www.youtube.com/embed/8kyWDhB_QeI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

左栏中的文本也需要始终保持居中，水平和垂直。

Answer 1

您可以使用 Flexbox：

section {
  display: flex; /* displays flex-items (children) inline where the height of all items is dictated by the height of the "tallest" one (achieved by the default "align-items: stretch") */
  width: 1000px;
}

.half {
  width: 50%;
  position: relative;
  /*float: left; not necessary */
}

.grey {
  display: flex;
  justify-content: center; /* horizontally centered */
  align-items: center; /* vertically centered */
  background: #f5f5f5;
}

<section>
  <div class="half grey one">
    <p>text goes here.</p>
  </div>
  <div class="half">
    <iframe  src="https://www.youtube.com/embed/8kyWDhB_QeI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>