JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside">
		<div class="inside">
		</div>
	</div>

CSS

/*CSS#1 does not work*/
.outside{
	background: blue;
	width: 400px;
	height: 400px;
    overflow: auto;
}
.inside{
	background: red;
	width: 200px;
	height: 200px;
	position: relative;
	top: 50%;
	margin: 0 auto;
	margin-top: -100px; /*half height of this div*/
}