JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container lineheight">
    <div class="innertext">Mutli-line vertically aligned text that does not use css table display to position it. Instead, it utilizes the line height of the container div and vertical-align center of the inner div.</div>
</div>
<div class="container tabled">
    <div class="innertext">Vertical align multi-line text inside a div with display set to table-cell and its parent set to display table.</div>
</div>

CSS

.container{ background-color: lightsteelblue; width: 250px; min-height: 360px; padding: 0px 25px; margin: 0 10px 10px 0; text-align: center; float: left; }

.innertext:before { content: 'M'; font-size: 48px; display: block; text-align: center; line-height: 48px; }

.lineheight { line-height: 360px; }
.lineheight .innertext{ line-height: 18px; display: inline-block; vertical-align: middle; }

.tabled{ display: table; }
.tabled .innertext{ display: table-cell; vertical-align: middle; }