Bootstrap中的垂直对齐中心和匹配高度

Question

我正在尝试在 Bootstrap 中进行一些垂直对齐，但似乎无法通过各种弹性框类（align-items-center 等）实现它。

我需要以下代码笔框中的文本内容垂直居中...同时每个框也应与最高框的高度匹配（目前正在工作）...有人可以帮忙吗？！

内部 div 需要包含在链接中 - 不知道这是否会影响事情？

https://codepen.io/jwacreative/pen/VwjePEj

<div class="container">
<div class="row">
  <div class="col-md-6 col-lg-4 mb-4">
  <a href="http://">
    <div class="summary-box h-100" style="background:red">
      <h2>Title</h2>
      <p>Some text</p>
    </div>
  </a>
  </div>
  <div class="col-md-6 col-lg-4 mb-4">
  <a href="http://">
    <div class="summary-box h-100" style="background:green">
      <h2>Title</h2>
      <p>Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text Some text longer text<< /p>
    </div>
  </a>
  </div>
  <div class="col-md-6 col-lg-4 mb-4">
    <div class="summary-box h-100" style="background:blue">
      <h2>Title</h2>
      <p>Some text</p>
    </div>
  </div>
</div>

Answer 1

CSS Grid 应该能够帮助解决这个问题...

.summary-box {
  display: grid;
  align-content: center;
}