垂直居中格div與最小高度的相對格

Question

我有一個絕對定位的div內的Bootstrap列（相對定位）絕對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; 
    } 

當768px屏幕.section僞內容DIV繼續頂在.section僞-IMG股利。該列的高度由放置在.section-img上的最小高度生成。 我試圖垂直居中列/ .section-img中的.section-content。 //////

Answer 1

您不必使用表格。如果我理解正確的話，作爲羅布說，創建一個內部包裝和父容器的顯示性能與vertical-align: middle;

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

設置爲table和內包裝材料，以table-cell這裏的CSS

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