Html 垂直居中的图像，缩略图和网格中有引导

我想要垂直居中的图像，在网格类和缩略图类中使用引导。缩略图类的高度应相同。并且段落应该在图像下方的同一级别。 我尝试了一切可能的方法，但在互联网搜索中，我没有找到一个合适的解决方案。例如，只有带有网格的图像或带有缩略图的图像，但没有与网格和缩略图结合使用。 有人能解决我的问题吗

<div class="row">
          <div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_100px.jpg" ></div>
            </div>
            <p>Some Text</p>
          </div><!--

          --><div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_60px" ></div>
            </div>
            <p>Some Text</p>
          </div><!--

          --><div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_120px.jpg" ></div>
            </div>
            <p>Some Text</p>            
          </div><!--

          --><div class="col-md-3">
            <div class="thumbnail">
              <div><img src="pics/logo_pic_height_80px.jpg" ></div>
            </div>
            <p>Some Text</p>
          </div>
        </div>

---

包含

缩略图的父元素必须具有
显示：表用于
垂直对齐：中间开始工作。最佳做法是使用
布局，并将
垂直对齐
指定给要在中间垂直对齐的图元，例如：

table, tbody, thead, th, tr, td, td table {
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
td, th {
  display: table-cell;
  vertical-align: inherit;
}

td
元素（或您的示例中的
.thumboil
）应该是
display:table单元格内
显示：表格元素

请注意，当使用
垂直对齐：中间时，指定给父元素的
行高
值也会产生影响在它的子对象上

我不建议使用
top:50%；转化：translateY（-50%）正如上面其他人所建议的，这根本不是最佳实践。
所以您希望文本块都是一样的？…我想我有点困惑，每张图片都有不同的高度？…我模拟了一些东西告诉我这是否接近您的体验。这些图像有不同的高度，因为不同的群体有不同的标识。
table, tbody, thead, th, tr, td, td table {
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
td, th {
  display: table-cell;
  vertical-align: inherit;
}