JSFiddle - React, Tailwind, and code Playground

by Aides

HTML

<div id="wrapper">
  <div id="imageWrapper">
    <div id="image"></div>
  </div>
</div>

CSS

*
{
  box-sizing: border-box;
}

html, body
{
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0px;
}

#wrapper
{
  width: 80%;
  height: 80%;
  background-color: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#imageWrapper
{
  width: 100%;
  position: relative;
}

#image
{
  width: 24px;
  height: 32px;
  background-color: red;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}