将 div 与 Bootstrap 列中的相邻 div 对齐

Question

是否可以将 Bootstrap 列中的内容垂直对齐到另一个 div 的内容？

我有两列，A 和 B 彼此相邻。 单击 B 列中的项目时，A 列中会出现一个单词列表。 我希望 A 中的这个单词集合垂直居中于 B 中的选定单词周围。

这是一个 JSFiddle，它对正在发生的事情有一个基本的想法，没有垂直居中

https://jsfiddle.net/so4902r8/5/

HTML

<div class="row">
  <div class="col-2 offset-4">   
    <div id="wordList1">
      [text]
    </div>
    <div id="wordList2">
      [text]
    </div>
  </div>
  <div id="clickMes" class="col-2">
    <div id="clickMe1">
      <a onClick="clickMe1()">Click Me 1</a>
    </div>
    <div id="clickMe2">
      <a onClick="clickMe2()">Click Me 2</a>
    </div>
  </div>
</div>

JS

function clickMe1() {
var x = document.getElementById("wordList1");
  if (x.style.display === "none") {
x.style.display = "block";
document.getElementById("wordList2").style.display = "none";
  } else {
x.style.display = "none";
  }
}


function clickMe2() {
var x = document.getElementById("wordList2");
  if (x.style.display === "none") {
    x.style.display = "block";
    document.getElementById("wordList1").style.display = "none";
  } else {
    x.style.display = "none";
  }
}

Answer 1

通常这将是 Vertical Align Center in Bootstrap 和 Bootstrap Center Vertical and Horizontal Alignment 的副本

但是，此 CSS 规则应用的顶部填充会阻止 align-items-center 按预期工作...

.clickMes {
  padding-top: 50px;
}

因此，删除顶部填充并在行上使用align-items-center。

Demo