CSS issue with floating text over images on hover - html

Question

I had this effect working on a Shopify site I designed about a year ago (http://originalchuck.com/), and then tonight, unbeknownst to me, the client decides to buy a new theme, turn it on and now one of my CSS tricks no longer works. If you go to the three images beneath the two blog posts, you'll see the problem. Roll over them, and the image opacity changes. That's the good news. The bad? Some text in a span is also supposed to appear in the dead center of each image, but now it no longer does. My code is the same as the previous theme, so why isn't it working anymore? Here's my CSS:
span.text-content, span.text-content-bags {
color: #ffffff;
font-size: 30px;
left: 0px;
opacity: 0;
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
}
span.text-content span, div.homepage-bags span.text-content-bags span {
left: 0px;
margin-top: -12px;
position: relative;
text-align: center;
top: 50%;
width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
opacity: 1;
display: inline-block;
}

Answer 1

Here's a cool trick to center stuff inside a container:
set position: relative on the outer, containing element, and then on the element you want centered, do this:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
text-align: center;
You also need to set a height and width for the inner element. The units shouldn't matter.
Works in all browsers including at least IE8+. It may even go further back than that.