JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="img-container">
            <!-- <img src="http://placehold.it/400x450"> -->
            <img src="http://placehold.it/400x450">
            <!-- <img src="http://placehold.it/400x480"> -->
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0 0;
    /*border: 4px solid black;*/
}

.container-fluid {
    height: 100%;
    width: 100%;
    display: table;
    padding-right: 0;
    padding-left: 0;
    /*border: 4px solid blue;*/
}

.row-fluid {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    background-color:#990000;
    /*border: 4px solid red;*/
}

.img-container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
}

.img-container img{
    max-width: 100%;
    max-height:100%;
    margin-left: auto;
    margin-right: auto;
}

@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    .img-container img { width: 100%; max-width: -moz-max-content; }
}