JSFiddle - React, Tailwind, and code Playground

by germandost

HTML

<div class="box">
	<div class="box-inner">
		<div style="position: relative; left: -50%; bottom:-50%; border: dotted red 1px; background-color: yellow">
	      I am some centered shrink-to-fit content! <br />
	      tum te tum
	    </div>
	</div>
</div>

CSS

.box{
		width:100%;
		height: 400px;
		position: relative;
		background-color: gray

	}	
	.box-inner{
		width:200px;
		height: 100px;
		background-color: red;
		left: 50%;
		bottom:0;
		position: absolute;

	}