How to align text vertically center to the div?

HTML & CSS
2

Hi,

Can you clarify what element you are showing? Is it the shopnow-desc or is it another element not shown?

Also you have two anchors in the code but at the moment you have something on top hiding the one around the image. Are both anchors needed (two destinations) or does the whole block simply have one destination at all times.

If you avoid opacity and use rgba instead then you can make the background transparent without affecting the content.

Here’s how to center the items but I need to know the answers to the above for a full solution.

<!DOCTYPE HTML>
<html>
<head>
<style>
.fitdetails {
	position: relative;
	height: 610px;
	width: 412px;
	float: right;
	display:table;
}
.shopnow-desc {
	display:table-cell;
	vertical-align:middle;
	text-align: center;
	background:rgba(204,204,204,0.5);
}
.backdrop{
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:0;
	z-index:-1;
}
.shopnow-desc h2 {
	font-family: "Interstate-Bold"!important;
	font-size: 24px;
	color: #000;
	margin:0 0 30px;
	text-transform: uppercase;
}
.morecolors {
	text-align: center;
}
.morecolors a {
	background: #333;
	padding: 18px 66px;
	text-decoration: none;
	color: #fff;
	font-size: 16px;
	display:inline-block;
}
</style>
</head>
<body>
<div class="fitdetails"> <span class="backdrop"><img src="http://lorempixel.com/400/200" width="412" height="610"></span>
  <div class="shopnow-desc">
    <h2>Welcome Text</h2>
    <div class="morecolors"> <a href="#test" >SHOP NOW</a> </div>
  </div>
</div>
</div>
</body>
</html>