JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:500px;height:500px;border:1px solid black;" class="center">
    <div style="width:250px; height:250px; background:red;" class="center_element">
</div>
<div style="width:500px;height:500px;border:2px solid black;" class="center m-centerHorizontally">
    <div style="width:250px; height:250px; background:green;" class="center_element">
</div>

CSS

/* Module for Vertical Centering */
/* 	center goes on a container. 
	center_element goes on the elements you want to center. 
	Add the m-verticalOnly class to the center container to remove horizontal centering and only center the element vertically.
	http://css-tricks.com/centering-in-the-unknown/
 */
.center {
	white-space:nowrap;
}
.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center.m-nudgeLeft:before {
	margin-right: -0.5em;
}
.center.m-nudgeRight:before {
	margin-right: -0.1em;
}
.center > * {
	white-space:normal; /*reset the white-space to behave normally for all elements inside the centerV container */
	text-align:left;
}
.center_element {
	display:inline-block;
	float:none;
	vertical-align:middle;
	white-space:normal;
	text-align:left;
}
.center.m-centerHorizontally {
	text-align:center;
}