JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <div class="divWrapper">
            <div class="tx">This text will center align no matter how many lines there are</div>
        </div>
    </div>

    <div class="container">
        <div class="divWrapper">
            <div class="tx">This text will center align no matter how many lines there are. This text will center align no matter how many lines there are. This text will center align no matter how many lines there are. This text will center align no matter how many lines there are. This text will center align no matter how many lines there are. This text will center align no matter how many lines there are</div>
        </div>
    </div>
</body>

CSS

.container
{
    margin:2%;
    background-color:#888888;
    width:30%;
    padding-bottom:25%; /* relative size and position on page */
    float: left;
    position:relative;  /* coord system stop */
}

.divWrapper
{
    background-color:yellow;
    position:absolute;
    top:0px;
    padding-top:50%; /* center the top of child elements vetically */
    padding-bottom:50%;
    height:0px;
}
.tx
{               
    position: relative;
    background-color: transparent;
    text-align: center; /* horizontal centering */
    
    -webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod="auto expand")'; /*IE8 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand'); /*IE6, IE7*/
    transform: translateY(-50%);    
}