JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<div id="parent">
    <div id="child">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" />
        <span>Some text</span>
    </div>
</div>

CSS

#parent { 
    position: relative;
    height: 600px;
    border: 1px solid red;
}

#parent img {
    vertical-align: middle;
}

#child {
    position: absolute;
    top: 50%;
    height: 300px;
    left: 0;
    right: 0;
    margin-top: -150px;
    background: grey;
}