css - 需要将 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 fiddle )

position:relative；
顶部:50%；
转换:translateY(-50%);

这种方法对于垂直对齐内容通常非常可靠。