需要垂直居中div內的父母，同時保持所有div的流體

Question

我有一個問題集中在垂直文本的div，同時保持一切流暢。文本div的旁邊有照片，可以根據瀏覽器大小更改容器高度。當部分收縮時，我需要文本保持居中在其容器中。任何建議都會很棒！ Here is my fiddle

我需要幫助的部分設置如下，信息內的文本是需要垂直居中的部分。

<section class="section"> 
    <div class="row"> 
     <div class="col-md-7 info-outer"> 
     <div class="info"> 
      <h3>Lorem ipsum dolor sit amet</h3> 
      <p>Fusce tristique sem sem, nec hendrerit tellus tincidunt mollis. Sed dui risus, fringilla eu congue vitae, tempus sed erat. Cras et molestie ligula. Fusce molestie eros ac enim imperdiet, sit amet gravida mauris fermentum. Sed rutrum eros 
      sed elit ultricies, consectetur tincidunt lorem aliquet. </p> 
     </div> 
     </div> 
     <div class="col-md-5 photo"> 
     <img src="css/images/3.jpg" /> 
     </div> 
    </div> 
    <!-- /.row --> 
    </section> 
    <!-- /.section --> 

Answer 1

如果您將其添加到.floor-plan-info，它將垂直對齊內容。 （去了你的JS小提琴）

position: relative; top: 50%; transform: translateY(-50%);

這種方法通常爲垂直對齊的內容相當可靠。