JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="center"></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-size: 0;
  border: 0;
  outline: none;
}

.parent {
  width: 500px;
  height: 500px;
  border: 3px solid lime;
  display: flex;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
}

.center {
  width: 250px;
  height: 250px;
  border: 3px solid red;
  margin: auto;
}

JavaScript

// Дочерний элемент по перпендикулярной и поперечной оси был успешно отцентрован
// относительно родительского элемента с помощью display: flex назначенный родителю,
// а margin: auto дочери
// Пичаль в том, что не удалось таким же образом отцентровать сам родительский блок относительно body
// Вопрос решился указав паренту ниже лежащее
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
  // Вопрос ?
  // Как порешить с родителем в стиле flex?