Vertically Align Text Block in Responsive Square - html

Question

I wondered if someone could help me with this. Basically, I'm trying to center a text block vertically that sits within a square. The square is reponsive and therefore doesn't have a fixed width and height.
My HTML looks like this:
<div class="related-products">
<div class="row">
<div class="large-15 medium-15 columns">
<h5>Related Products</h5>
<div class="row">
<div class="small-15 medium-4 large-4 columns">
<div class="product">
<img src="http://store.kitchenscookshop.co.uk/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/t/3/t317_mug_red_1pt.jpg">
<dl>
<dt>Product Name is Product Name</dt>
<dd><del>£29</del> £24</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
And my CSS like this:
.product {
position: relative;
text-align: center;
display: block;
}
.product dl {
background-color: rgba(161,161,161,0.6);
width: 100%;
height: 100%;
padding: 0 20%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
I've also set up a demo over here.
Any help with pointing me in the right direction is appreciated.
Thanks in advance!

Answer 1

Unfortunately, vertical-align only works on inline elements. It's confused many a web developer, because it seems like something that should be easy to do.
I'm basically using this solution: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Change .product dl's CSS to:
.product dl {
background-color: rgba(161,161,161,0.6);
width: 100%;
height: auto; /* Won't work without this */
padding: 0 20%;
overflow: auto;
margin: auto;
position: absolute;
top: 50%;
-webkit-transform:translateY(-50%);
/* You may need to add more vendor prefixes; you can use http://prefixmycss.com */
transform:translateY(-50%);
z-index:2;
}
To fix the grey color overlay, we can remove the background color from .product dl and add this code:
.product:after {
position:absolute;
display:block;
content:'';
background-color: rgba(161,161,161,0.6);
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}

Answer 2

I added "display: table" to your ".product dl" and it seemed to work fine. Also, I think your "vertical-align: center" is meant to be "vertical-align: middle". Let me know how you did.

Answer 3

I re-worked it out a little. I saw you are using tables, not what I'd do, but its fine I guess. The principal is still the same. However, if you are pulling images from a database and you can't use my method, again, the css fundamentals I used can still be used by simply taking the img out of the background and fix it to the div
.product {
background: rgba(161, 161, 161, 0.6) url("http://store.kitchenscookshop.co.uk/media/catalog/product/cache/1/image/500x500/9df78eab33525d08d6e5fb8d27136e95/t/3/t317_mug_red_1pt.jpg") center center no-repeat;
height:400px;
padding: 0 20%;
overflow: auto;
margin: auto;
}
FIDDLE