JSFiddle - React, Tailwind, and code Playground

HTML

<div class='box'>
    <div>1:1</div>
</div>
<div class='box'>
    <div>This is just a longer text to demonstrate multiple lines being centered.</div>
</div>
<div class='box ratio2_1'>
    <div>2:1</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
    body {
        font-family:'Open Sans', sans-serif;
        font-size: 1.2em;
        font-weight: 700;
    }
    .box {
        width: 25%;
        height: 0;
        position: relative;
        padding-bottom: 25%;
        overflow: hidden;
        float: left;
        background-color: #9c9;
        color: #fff;
        text-shadow: 1px 1px #666;
        box-shadow: 0px 0px 1px 1px #666;
        border: 2px solid;
        margin: 1%;
        position: relative;
    }
    .box.ratio2_1 {
        padding-bottom: 12.5%;
    }
    .box > div {
        transform: translate(0%, -50%);
        -webkit-transform: translate(0%, -50%);
        -moz-transform: translate(0%, -50%);
        -o-transform: translate(0%, -50%);
        -ms-transform: translate(0%, -50%);
        top: 50%;
        position: absolute;
        text-align: center;
        width: 100%;
    }