JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <p>
        This is the position parent element.
    </p>
</div>

<div id="positionable">
    <p>
        to position
    </p>
</div>

CSS

div#parent {
    width: 311px;
    margin: auto;
    margin-right: 15px;
    padding: 5px;
    border: 1px solid #777;
    background-color: #fbca93;
    text-align: center;
}
div#positionable {
    opacity:0.5;
    width: 75px;
    height: 75px;
    background-color: #bcd5e6;
}

JavaScript

var double_left = $('#parent').position().left * 2;
var space_around = $('#parent').parent().innerWidth() - $('#parent').outerWidth();
var item_centered = (space_around - double_left < 2 );
var margin_left_0_or_auto = ($("#parent").css("marginLeft") === '0px');
var margin_right_0_or_auto = ($("#parent").css("marginRight") === '0px');
if (item_centered && space_around > 0 && margin_left_0_or_auto ) {
    var real_margin_left = 'auto';
} else {
    var real_margin_left= $("#parent").css("marginLeft");
}
if (item_centered && space_around > 0 && margin_right_0_or_auto) {
    var  real_margin_right = 'auto';
} else {
    var real_margin_right= $("#parent").css("marginRight");
}


$("#positionable").css({
    position: $("#parent").css("position"),
    top: $("#parent").css("top"),
    left: $("#parent").css("left"),
    marginLeft: real_margin_left,
    marginRight: real_margin_right,
});
//$("#parent").hide();