JSFiddle - React, Tailwind, and code Playground

by Oliver_kh

HTML

<div class="ff">
    <div class="dd"></div>
</div>

CSS

body {
    margin:0px;
}
.ff {
    width:100%;
    height:100px;
    background:#444;
}
.dd {
    position:relative;
    width:300px;
    height:30px;
    background:#eee;
}

JavaScript

$(function () {

    var hf = $(".ff").height();
    var hd = $(".dd").height();
    var tp = hf-hd;
    var x = tp/2;
        var whf = $(".ff").width();
    var whd = $(".dd").width();
    var wtp = whf-whd;
    var wx = wtp/2;
$(".dd").text(x);
  $(".dd").css('left',wx);
    $(".dd").css('top',x);

});