JSFiddle - React, Tailwind, and code Playground

by elizeubh2006

HTML

<div id="container">
     <div id="object">   
        
    </div>    
</div>

CSS

* { margin:0;padding:0; }
#container {
    width:350px;
    height:400px;
    background: #0000FF;
    margin-left: 50px;
}

* { margin:0;padding:0; }
#object {
    width:50px;
    height:50px;
    background: #ff00FF;
    position: relative;
}

JavaScript

function setObjPosition(container, object) {
    var containerWidth = $(container).width();
    var objectWidth = $(object).width();

    var position = (containerWidth / 2) - (objectWidth / 2);

    $(object).css('left', position);
}

function setPositionOnResize(container, object) {
    setObjPosition(container, object);
    $(container).resize(function () {
        setObjPosition(container, object);
    });
}


$(document).ready(function() {
    debugger;
    setPositionOnResize('#container', '#object');
    $(window).resize(function() {
        setPositionOnResize();    
    });
});