JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <div id="centered_div">
        <p>Vestibulum gravida tempus blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>Maecenas adipiscing varius augue at bibendum. In sed purus lorem, placerat feugiat sapien. Vivamus ac porta enim. Curabitur sed neque vitae quam commodo dictum non et magna.</p>
    </div>
</body>
</html>

CSS

#centered_div {
    width: 300px;
    border: 1px solid red;
}

JavaScript

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css({
        top: '50%',
        left: '50%', 
        margin: '-' + (this.height() / 2) + 'px 0 0 -' + (this.width() / 2) + 'px'
    });
    return this;
}
    

$(document).ready(function() {
    $('#centered_div').center();
});