JSFiddle - React, Tailwind, and code Playground

by chadocat

HTML

<div class="container">
    <div class="child">Hello i(red color div) should be cenetered in vertical direction</div>
</div>

CSS

.child {
    width: 100%;
    height: 50%;
    position:absolute;
    top:25%;
    left:0;
    background-color: red;
    color:white;
}
html, body, .container {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background:url('http://cdn.morguefile.com/imageData/public/files/e/earl53/preview/fldr_2009_05_25/file5821243281047.jpg');
    background-size:cover;
}