JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="mainContainer">
        <div id="horizon">
            <img src="http://oi42.tinypic.com/v9g8i.jpg" alt="over 9000"/>
        </div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
    /*overflow: hidden;*/
}
#mainContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table; /* to be removed */
}
#horizon {
    display: table-cell; /* to be removed */
    vertical-align: middle;
    background-color: yellow;
    width: 90%;
    height: 90%;
}
img {
    max-width: 100%;
    max-height: 100%;
}