JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Surrounding Content -->

<div id="surroundingContent">
    
    <!-- EXAMPLE -->
    <span class="vertical-center-hack">
        <span class="vertical-center-hack-wrap">
            <div class="vertical-center-hack-content">
                Blah Blah<br/>My Content
            </div>
        </span>
    </span>

</div>

CSS

#surroundingContent {
    height: 50px;
    width: 100%;
    background: red;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.vertical-center-hack {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}
.vertical-center-hack-wrap {
    line-height: 0;
}
.vertical-center-hack-content {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}