JSFiddle - React, Tailwind, and code Playground

HTML

<div class="DivParent">
    <div class="DivWhichNeedToBeVerticallyAligned">one line</div>
    <div class="DivHelper"></div>
</div>
<div class="DivParent">
    <div class="DivWhichNeedToBeVerticallyAligned">
        <p>Two</p>
        <p>Lines</p>
    </div>
    <div class="DivHelper"></div>
</div>

CSS

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
    background: gray;
    text-align: center;
    position:relative;

}
.DivWhichNeedToBeVerticallyAligned {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: red;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
        vertical-align: middle;
}