JSFiddle - React, Tailwind, and code Playground

by maxx0r

HTML

<div id="container">
<div class="block">
    <h1>Wajooo Nietz!</h1>
    <p>
        Ratatat hasdfkhasld <br />
                Ratatat hasdfkhasld <br />
                Ratatat hasdfkhasld 
    </p>
</div>
</div>

CSS

#container { background:red; height:500px; width:100%;  position:relative;}
.block {
    position:absolute;
    width:500px;
    left:50%;
    margin-left:-250px;
background:orange;
    
}

JavaScript

$(document).ready(function() {
    $(".block").each(function() {
        var parentHeight = $(this).parent().height();
        var myHeight = $(this).height();
        var myMarginTop = (parentHeight - myHeight) / 2;
         $(this).css("margin-top", myMarginTop +"px");
    });        
});