JSFiddle - React, Tailwind, and code Playground

by Marian Rick

HTML

<div class="popup-layout">
  <div class="popup-content">
    <div class="popup-center-horizontal">
      Some content
    </div>
  </div>
</div>

CSS

.popup-layout {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
}

.popup-content {
  position: absolute;
  top: 50%;
  width: 100%;
  /*left: 50%;*/
  font-size: 55px;
  background: #f6f6f6; /* just for demo */
  padding: 15px;
  /* width: 400px; */
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.popup-center-horizontal {
  display: table;
  margin: 0 auto;
  background: red;
}