JSFiddle - React, Tailwind, and code Playground

by matharden

HTML

<div id="parent" class="DEMO">
   <div id="child">blahblah</div>
</div>

CSS

/**
 * 1. You can use absolute/fixed/relative.
 * 2. Your required dimensions.
 * 3. Use max-width/heigh combined with % to prevent scrolling,
 *    otherwise just a fixed width/height.
 * 4. Push the element to the vertical/horizontal center.
 * 5. Pull the element back by half of its dimensions.
 */

body {
  margin: 0;  /* Remove browser default margin. */
}

#parent {
  position: absolute;  /* 1 */
  max-width: 500px;  /* 2, 3 */
  max-height: 500px;  /* 2, 3 */
  width: 100%;  /* 3 */
  height: 100%;  /* 3 */
  top: 50%;  /* 4 */
  left: 50%;  /* 4 */
  transform: translate(-50%, -50%);  /* 5 */
}

.DEMO {
  background: #000;
  color: white;
}

.DEMO > div::after {
  content: 'blahblah';
  position: absolute;
  right: 0;
  bottom: 0;
}