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

问题描述

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

我需要将以下Codepen框中的文本内容垂直居中...同时每个框都应与最高框的高度匹配（当前正在使用中）...有人可以帮忙吗？！>

内部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>

解决方法

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

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