JSFiddle - React, Tailwind, and code Playground
HTML
<div class="center"></div>
CSS
.center{
width:100px;
height:100px;
border:1px solid black;
border-radius:5px;
}
JavaScript
$(function () {
makeDivCenter();
$(window).resize(function () {
makeDivCenter();
})
});
function makeDivCenter() {
var windowWidth = $(window).width();
var divWidth = $(".center").width();
var windowHeight = $(window).height();
var divHeight = $(".center").height();
$(".center").css({
'margin-left': (windowWidth / 2) - (divWidth / 2) + "px",
'margin-top': (windowHeight / 2) - (divHeight / 2) + "px"
});
}