JSFiddle - React, Tailwind, and code Playground

HTML

<section id="abc">
  <div class="table-cell">
    <div class="table-center wow fadeInUp delayp2 animated" style="visibility: visible;">
      <h1 class="text-center">Center Me</h1>
   
     
    </div>
  </div>
</section>

CSS

#abc {
	background: url(http://i.imgur.com/nvH8nI3.jpg) 50% 0 repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 500px;
	display: table;
	
	-moz-box-shadow: inset 0 0 20px #333;
-webkit-box-shadow: inset 0 0 20px #333;
box-shadow: inset 0 0 20px #333;

}
.table-cell {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.table-center {
	display: inline-block;
width: 460px;
background: rgba(45, 45, 45, 0.80);
border-radius: 5px;
padding: 30px 30px;
-webkit-box-shadow: 0 0 7px 2px #0F1519;
box-shadow: 0 0 7px 2px #0F1519;

	
}

.col-centered {
	float: none;
	margin: 0 auto;
}