JSFiddle - React, Tailwind, and code Playground

by joecritch

HTML

<div class="vertical-center" style="height: 400px;">
    <div class="mid">
        <p>This should be centered</p>
        <p>As should this</p>
    </div>
</div>

CSS

.vertical-center { background: yellow; }
.vertical-center .mid { background: red; position: relative; display: block; }

JavaScript

$('.vertical-center').each(function() {
        var mid = $(this).children('.mid').eq(0);
        var val = ((mid.parent().height() - mid.height()) / 2);
        mid.css('top', val + 'px');
    });