Gist for Centering Text over Image

.html

<div id="borderDiv" class="BorderDiv">
	<div id="imageDiv-##locationid##" class="imageDiv">
		<div id="LocationImageBackDiv-##locationid##"><img id="LocationImageBack-##locationid##" class="LocationImage blur" src="##imageURL##" /></div>
		<img id="LocationImageTop-##locationid##" class="LocationImage" src="##stampImageURL##" />
		<div id="LocationItemDescription-##locationid##" class="LocationItemDescription">##LocationItemDescription##</div>
	</div>
</div>
			
<!--CSS-->
.LocationDiv{
	width: 88.66666666666667px;
	padding-left: 2.5px;
	margin-left: 0px;
	margin-right: 0px;
	padding-right: 2.5px;
	display: inline-block;
}
.ImageDiv{
	width: 88.66666666666667px;
	margin-left: 0px;
	margin-right: 0px;
	display: inline-block;
	opacity:0.8;
}
.LocationTimeStamp{
	text-align:center;
}
.LocationItemDescription {
	/*OBSOLETE*/
	padding-left: 84px;
	padding-bottom: 84px;
	
	display: block;
	z-index: 50;
	width: 99%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}