JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pointer"></div>

CSS

body{
    background:red;
}

#pointer{
    width:50px;
    height:50px;
    background:#000;
    position:absolute;
}

JavaScript

//get the width of the stage 
var stageWidth = $(window).outerWidth();

//get the height of the stage
var stageHeight = $(window).outerHeight();

//the object to center
var objectToCenter = $('#pointer');

//gets the outer width of the object to center
var pointerWidth = objectToCenter.outerWidth();

//gets the outer height of the object to center
var pointerHeight = objectToCenter.outerHeight();

//function to center the object to the stage
var centerPointer = function(){
    
    //calculates the stage width and height and divides it by 2, calculates the width and height of the object to center and divides it by 2, takes both results and subtracts them in order to center the object to teh stage
    objectToCenter.css({'left': (stageWidth/2) - (pointerWidth/2)+'px', 'top': (stageHeight/2) - (pointerHeight/2)+'px'});
    
};

//runs the function
centerPointer();