Responsive Vertical Alignment of text inside an absolutely positioned div - html

Question

I'm creating a thumbnail image gallery. I'm having it where you hover over the image and you see the title and description. I want the title and description centred inside the hover div.
Because I have positioned the hover div as absolute, I'm having trouble using the usual table methods to vertically align. Whenever I resized the viewport, the text wouldn't be in the centre anymore.
Any help with this would be appreciated.
Here is the jsfiddle example: http://jsfiddle.net/Forresty/2snra4tL/1/
Here is the code:
HTML:
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</a>
CSS:
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
//overflow: hidden;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}

Answer 1

I answered my own question.
The final code can be seen here: http://jsfiddle.net/Forresty/2snra4tL/4/
I added another div as a table containing the div that contains the text.
Thanks again.
HTML:
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
<a class="work_item_link_no_margin" href="#">
<div class="work_item">
<img src="http://www.personal.psu.edu/ivs5030/plant.jpg">
<div class="item_hover">
<div class="center">
<div class="item_description">
<h4>Item Heading</h4>
<p>ITEM DESCRIPTION</p>
</div>
</div>
</div>
</div>
</a>
SCSS:
.work_item_link {
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.work_item_link_no_margin {
position: relative;
width: 32%;
height: auto;
float: left;
&:hover {
.item_hover {
opacity: 1;
}
}
img {
width: 100%;
display: block;
}
}
.item_hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
opacity: 0;
transition: all 1s;
}
.center{
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.item_description{
display: table-cell;
vertical-align: middle;
p, h4{
margin: 0;
}
}

Answer 2

Here is how you align your text:
Horizontally:
.item_description p,
.item_description h4{
text-align:center;
}
Vertically:
.item_description{
position: relative;
margin-top: 50%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
Fixed Fiddle

Answer 3

fff...
im too late. i was hoping to be able to provide my first answer...
i made a nice fiddle for you.
my technique:
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: relative;