JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<div id="mydiv"></div>

CSS

#mydiv {
  position: fixed;
   background-color: #F00;
  width: 200px; /*Change these accordingly*/
  height: 150px;
  top: 50%; /* Move the top edge to the middle of the viewport */
  left: 50%; /* Move the left edge to the middle of the viewport */
  margin-left: -100px; /*You want to shift it back half of the width of your div, so it's nicely centered*/
  margin-top: -75px; /*The same applies here*/
}