JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outerBox">
    <div class="helper" style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
        <div class="boxWithUnknownHeight" style=" #position: relative; #top: -50%">
            any text<br>
            any height<br>
            any content, for example generated from DB<br>
            everything is vertically centered
        </div>
    </div>
</div>

CSS

.outerBox {
    display: table;
    height: 400px;
    #position: relative; /* ie hack */
    overflow: hidden;
    border: 1px solid red;
}

.helper {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
}

.boxWithUnknownHeight {
    #position: relative;
    #top: -50%;
    border: 1px solid green
}