JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<div class="box"><div>

CSS

.box {
    width:200px;
    height:200px;
    background-color:red;
    display:none;
}

JavaScript

// Small plugin to center any element.
jQuery.fn.center = function () {
    
		this.css("position","absolute");
		this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
													$(window).scrollTop()) + "px");
		this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
													$(window).scrollLeft()) + "px");
		return this;
	}
	
// Call the .center(); function to the ".box" div.
// This can be used to center anything. just use .center(); on any element.
    $('.box').center();

// When the window is resized, center the div to adjust to the resize.
    $(window).resize(function() {
        $('.box').center();
    });

// Now call the jQuery UI animation.
    $('.box').show("scale", 1000
        ,function() {
            // on Animation Complete, do something.
        }
    );