html - 垂直对齐 bootstrap div 中的内容

Question

好的，所以我可能对我认为应该很简单的内容感到困惑。以下面的代码为例，刚开始使用 Bootstrap，所以可能不完美但足以作为示例。

<div class="row">
   <div class="col-md-12">
      <div class="col-md-4">
         <h1>Logo Text</h1>
      </div>
      <div class="col-md-8">
         <ul> Navbar.... </ul>
      </div>
   </div>
</div>

假设上面的代码是我的标题，我如何确保 Logo 和导航栏的两侧在各自的 div 中水平和垂直居中？

我怀疑我需要使用 table、table-cell、vertical-align: center 但这真的有效吗？

需要保持响应。

谢谢

Answer 1

试试这门课:

.vertical_align_middle {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    /* etc */
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}