JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <a href="#">
        <div class="product">
            <div class="product-image">
                <img src="http://images.cabelas.com/is/image/cabelas/s7_291526_imageset_02" />
            </div>
            <div class="product-model">sadf</div>
            <div class="product-price"> : 234</div>
        </div>
    </a>
    <a href="#">
        <div class="product">
            <div class="product-image">
                <img src="http://images.cabelas.com/is/image/cabelas/s7_291326_imageset_01" />
            </div>
            <div class="product-model">sdaf</div>
            <div class="product-bottom"> : 2345</div>
        </div>
     </a>
</div>

CSS

.product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
}
.product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    text-align:center;
    border:1px solid #999;
}
.product-image img
{
    max-height: 100%;
    max-width: 100%;
}

JavaScript

var _h = $('div.product-image').height();
$('div.product-image img').each(function()
{
    var _top = (_h - $(this).height()) / 2;
    $(this).css('margin-top',_top);
});