JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mask"></div>
<div class="container">
    <div class="inside">
        <p>This is my box.</p>
        <p>Suck my box.</p>
    </div>
</div>

CSS

body {
    background: #bada55;
}

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    background: rgba(15, 15, 15, .7);
}

.container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;

    display: -ms-box;
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -ms-box-align: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    -ms-box-pack: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}

.inside {
    width: 500px;
    height: 200px;
    
    border: 5px solid #555;
    background: #0aaac8;
}

JavaScript

/* CSS3 Flexbox centering! */
/* Mask is optional */