具有最小高度的相对 div 中的垂直居中 div

Question

我在 Bootstrap 列（相对定位）中有一个绝对定位的 div，绝对 div 或列都没有定义的高度。但是列 div 的最小高度为 400px。

html

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

     <div class="col-sm-6 section-img">
        ... full cover image ...
    </div>
 </div>

css

   @media screen and (max-width: 768px) {

  .section-content { position: absolute; }

  .section-img { min-height: 400px; }

  .row-eq-height {
    position: relative;
    min-height: 400px;
   }

当屏幕为 768 像素时，.section-content div 位于 .section-img div 的顶部。列的高度由 .section-img 上的最小高度生成。 我正在尝试将 .section-content 垂直居中在 column/.section-img 内。 //////

Answer 1

您不必使用表格。如果我理解正确，正如 Rob 所说，创建一个内部包装器并将父容器的显示属性设置为 table 并将内部包装器设置为 table-cell 和 vertical-align: middle;

<div class="col-sm-6 section-img">
  <div class="middle">... full cover image ...</div>
</div>

这是 CSS

.section-img {
  min-height: 400px;
  display: table;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}