JSFiddle - React, Tailwind, and code Playground

by magnus16

HTML

<div id="div1">
    <img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/>
</div>
<div id="div2">
    <h1>Hello</h1>
</div>
<div id="div3">
          <img src="http://www.curiousfix.com/wp-content/uploads/2013/06/only_god_forgives_xxlg-2000x2964.jpg"/>
</div>

CSS

#div1,#div2,#div3{
    display:block;
    margin:20px auto;
    width:400px;
    height:200px;
    background-color:#ccc;
    text-align:center;
    position:relative;
}
#div1 img{
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
}

#div2 h1{
    line-height:200px;
}
#div3{
    display:table-cell;
    vertical-align:middle;
}
#div3 img{
    height:100px;
}