JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lightboxoverlay">
    <div class="squarebox">
        <div class="child">
            This Is<br />
            Vertically Aligned<br />
            Content, Yo<br />
        </div>
    </div>
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
    font-family: Trebuchet MS;
}

.lightboxoverlay {
    width: 640px;
    height: 360px;
    background-color: #EDBDEB;
    padding: 2.500em;
}

.squarebox {
    display: inline-block;
    height: 100%;
    background-color: #6E71FE;
    color: #FFFFFF;
    vertical-align: middle;
    text-align: center;
}

.squarebox:before, .squarebox:after {
    content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.child {
    display: inline-block;
    vertical-align: middle;
}