JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-image-gallery">
    <img id="image-main" class="gallery-image visible" src="http://2.bp.blogspot.com/-NJTDTa6UZf4/U3Bu-B5XrbI/AAAAAAAAOf8/yVCeh-yMr-k/s1600/google-logo-874x288.png">
</div>

CSS

.product-image-gallery {
    height: 400px;
    display: flex;
    border: 2px solid #e3e3e3;
    align-items: center;
}
.gallery-image.visible {
    max-height: 400px;
    max-width: 400px;
    vertical-align: middle;
}