JSFiddle - React, Tailwind, and code Playground

by Kitson Broadhurst

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 Awesome quote<br/>My Content is a quote...<br/><span class="author">-author</span>
            </div>
        </span>
    </span>
</div>

CSS

#surroundingContent {
    height: 300px;
    width: 50%;
    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;
}
.author {
    text-align: right;
}