JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/6996875/centering-a-floating-div-with-jquery

by tw16

HTML

<div id="dialog"></div>

CSS

#dialog{
    width: 200px;
    height: 200px;
    background: skyblue;
}

JavaScript

$(function () {
    central();
});

//This allows it to stay central on resize
$(window).resize(function() {
    central();
});


function central() {
   var width = ($(window).width() - $('#dialog').width()) / 2;
   var height = ($(window).height() - $('#dialog').height()) / 2;
    
   $('#dialog').css({'position' : 'absolute' , 'left' : width + 'px', 'top' : height + 'px'});
}