JSFiddle - React, Tailwind, and code Playground

by Birol Efe

HTML

<main class="skin_orange">
	<p>As you can the the element/box is vertically centered</p>
	<div class="bigBox skin_blue">Blue Box</div>
	</main>

CSS

main {
	position: relative;
	width: 400px;
	height: 400px;
}

.skin_orange {
	outline: thin dotted red;
	background: orange;
}

.bigBox {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.skin_blue {
	background-color: blue;
}