JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    test
</div>

SCSS

$max-height: 500px;
$max-width: 500px;

* {
    padding: 0;
    margin: 0;
}

body {
    background: #000;
    position: relative;
}
.container {
    background: #fff;
    box-sizing: border-box;
    min-height: 400px;
    max-width: $max-width;
    max-height: $max-height;
    margin: 0 auto;
    padding: 20px;
}

@media screen and (min-width: $max-width) and (min-height: $max-height) {
    .container {
        margin-top: calc((100% - #{$max-height}) / 2);
    }
}