JSFiddle - React, Tailwind, and code Playground

HTML

<div class="other-class">Some content</div>
<div class="container">
    <div class="container-text">Align this very long text to the vertical Center and horizontal center. Extra text should not be visible</div>
</div>
<div class="other-class">Some other content</div>
<div class="other-class">Some other content</div>
<div class="container">
    <div class="container-text">Vertical Center me too</div>
</div>
<div class="other-class">Some other content</div>

CSS

.other-class {
    width:180px;
    height:50px;
    float:none;
    background:lightyellow;
    margin-bottom:4px;
    margin-top: 4px;
    border:solid 1px black;
}
.container {
    height:40px;
    border:solid 1px black;
    width: 180px;
    overflow:hidden;
}
.container-text {
    height:40px;
    width:180px;
    overflow-y:hidden;    
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}