JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<div id="dim">
</div>

CSS

html, body, #dim
{
    width:100%;
    height:100%
}
body
{
    padding:0em;
}
div#dim
{
    position:absolute;
    background-color:silver;
    width: 100px;
    height: 40px;
    left: 50px;
    top: 20px;
}

JavaScript

//Hey guys I want the cyan div --->
//to be centered in its parent the silver div -->
//vertically and horizontaly
//on window resize it should update properly
//best of all if its only css!
//I'm looking forward for your suggestions!

jQuery.fn.center = function () {
  //  this.parent().css("position","absolute");
    //var t = this.parent().css("top");
    //var l = this.parent().css("left");
    
    this.css("position","absolute");
    this.css("top", (($(document).height() - this.outerHeight()) / 2) + 0 + "px");
    this.css("left", (($(document).width() - this.outerWidth()) / 2) + 0 + "px");
    return this;
}

$('#dim').center();