JSFiddle - React, Tailwind, and code Playground

by Alex Myronov

HTML

<div class="Center-Container is-Table">
	<div class="Table-Cell">
		<div class="Absolute-Center Center-Block"></div>
	</div>
</div>

CSS

.Center-Container {
  position: relative;
	height: 100vh;
	width: 100vw;
}

.Absolute-Center {
  width: 50px;
  height: 50px;
/*   overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0; */
	background-color: red;
}


.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}