JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product">
    <div class="image"> <a href="#">
            <img src="http://i.imgur.com/rthFtAb.jpg" />
        </a>

    </div>
</div>

CSS

.product {
        height:225px;
        width:220px;
        background-color:#ff00ff;
        display:table;
        table-layout:fixed;
    }
    .image {
        display:table-cell;
        vertical-align:middle;
    }
    .image img {
        max-width:100%;
    }