JSFiddle - React, Tailwind, and code Playground

HTML

<div class="black">
    <div class="message">
        This is a popup message.
    </div>
</div>

CSS

/* These are the necessary styles for vertical centering with margin: auto; */
.message {
    width:200px; /* Width or max-width to prevent the box from stretching the whole width of the area */
    height: 1em; /* Must declare a height to center vertically */
    position: absolute; /* Must be position: fixed or position: absolute */
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    /* Read more at http://codepen.io/shshaw/pen/gEiDt */
}

/* Styles for visual appeal */
.black {
    position: fixed;
    top:0; bottom:0; left:0; right:0;
    background:rgba(0,0,0,.6);
}
.message {
    background:yellow;
    padding:10px;
    text-align: center;
 }