html - 垂直居中，父级高度可调

Question

我正在使用带有两个 col-sm-6 类列的 Bootstrap 框架。它们使用 row-eq-height 在高度上匹配，因为相邻的列仅包含背景图像。

更新代码:

section, .section-img {
 position: relative;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
 margin: 0; padding: 0;
}

 .row-eq-height {
  min-height: 400px;
  display: flex;
 }

.col-sm-6 {
 flex: 1;
 display: flex;
 align-items: center;
}

.section-content {
 flex: 1;
 text-align: center;
}

<section class="row row-eq-height">
  <div class="col-sm-6">
    <div class="section-content">
      .... content of post ...
    </div>
  </div>

  <div class="col-sm-6 section-img" style="background-image:url('<?php ... image code ... ?>>
    ... image taking up all the space ....
  </div>

</section>

当高度增加但删除图像高度(行高相等)时，代码居中并进行调整。图片应与其相邻的列一样高，以便图片显示

更新后的输出:

Answer 1

因为你已经使用了 flexbox 你可以跳过 position:absolute, transform: translate(),... 部分来居中并使用 flexbox 拥有它的属性。

.row-eq-height {
  min-height: 400px;
  display: flex;
}
.col-sm-6 {
  flex: 1;
  display: flex;
  align-items: center;
}
.section-content {
  flex: 1;
  text-align: center;
}
.section-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

<section class="row row-eq-height">
    <div class="col-sm-6">
      <div class="section-content">
        .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
      </div>
    </div>
    <div class="col-sm-6 section-img" style="background-image: url(http://lorempixel.com/300/300/nature/1)">
    </div>
</section>