JSFiddle - React, Tailwind, and code Playground

HTML

<div id="centered">
  <p>This is an absolute positioned element that has been centered with <span>margin: auto</span>.</p>
  <p>The secret lies in the fact that it has been set to fill the page with <span>top: 0; left: 0; right: 0; bottom: 0;</span>, but still has a <span>fixed width and height</span>.</p>
</div>

CSS

*,*:before,*:after{box-sizing:border-box;position:relative}
html,body{
  background-color: #DDDDE1;
  height: 100%;
  margin: 0;
  font-family: sans-serif, arial;
  overflow: hidden;
}

#centered{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 60%;
  max-width: 500px;
  min-height: 60%;
  max-height: 300px;
  padding: 0 1em;
  background-color: rgba(0,0,0,.25);
  color: #FFF;
  border: 2px solid #FFF;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,.25);
  line-height: 1.8;
  overflow-y: scroll;
}

#centered span{
  background-color: rgba(0,0,0,.125);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  padding: 2px 5px;
  white-space: nowrap;
}