JSFiddle - React, Tailwind, and code Playground

HTML

<div id="out-container"  onclick="alert('C')">
<div class="container">
            <div class="helper" id="content">
                <div class="content" onclick="alert('A') event.stopPropagation;">
                </div>
            </div>
        </div>
  </div>

CSS

body
            {
                margin:0;   
            }
            .container
            {
                display:table;
                width:100vw;
                height:100vh;
                position:absolute;
                background:#000;
            }
            .helper
            {
                display:table-cell;
                vertical-align:middle;
            }
            .content
            {
                margin-left:auto;
                margin-right:auto;
                width:500px;
                height:200px;
                background:#FFF;
            }