Sure, the product on the left is having a full size image and that becomes centered both horizontally and vertically. However, the product on the right is only approx 30 x 30 pixels and it doesn't center vertically.
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight whitebgprod">
<img src="https://distribucionesplata.com/tienda/12820-thickbox_default/pan-wasa-delikatess-270-gr.jpg" class="img-fluid mx-auto shoppic" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<h4 class="card-title">
<strong>
<a href="">Denim trousers</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit..
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>49$</strong>
</span>
<span class="right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text"></i>
</a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
<i class="fa fa-heart"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight whitebgprod">
<img src="litenprodukt.jpg" class="img-fluid mx-auto shoppic" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Category & Title-->
<h4 class="card-title">
<strong>
<a href="">High heels</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>89$</strong>
</span>
<span class="right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fa fa-shopping-cart grey-text"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fa fa-share-alt grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->