JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="element">
       
        <p>this is some content<br />
            over two lines</p>
    
    </div>
</div>

<div class="container">
    <div class="element">
       
        <p>this is some content<br />
            this is some content<br />
            this is some content<br />
            this is some content<br />
            this is some content<br />
            this is some content<br />
            this is some content<br />
            over more lines</p>
    
    </div>
</div>

CSS

.container {
    background-color:green;
    height:300px;
    width:200px;
    position:relative;
    margin:30px
}
.element {
    position:absolute;
    top:100px; /*Approximation*/
    background-color:Red;
    width:200px;
    margin:0 auto;
}

JavaScript

$.fn.vAlign = function () {
    return this.each(function () {
        $(this).css('top', '50%').css('margin-top', -Math.ceil($(this).height() / 2) + "px");
    });
};

$(".element").vAlign();