JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
    <div class="gallery-background">
        <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="100"/>
    </div>
</div>

CSS

.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}

.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}

.gallery-background:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;  
    height: 100%;
}

.gallery-background img {
 max-height: 100%;
max-width: 100%;
    vertical-align: middle; 
}