Vertical Align Text Over Image With CSS - css

Question

I'm trying to make an image fade and then text appear centered over the image (Horizontally and vertically) but I can't get it to vertically center.
Here's my CSS:
<style type="text/css">
a img {
border: 0px;
opacity: 1;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;}
a:hover img {
/*60 80*/
opacity: .40;
filter: alpha(opacity=50);
-o-transition: opacity .1s linear;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity 1.5s linear;}
#wrapper .text {
visibility:hidden
}
#wrapper:hover .text {
position: absolute;
visibility:visible;
opacity: .60;
color:white;
font-size:24px;
font-weight:bold;
text-align:center;
width: 100%
}
</style>
Here's the HTML part (it's for Tumblr):
<div id="wrapper">{LinkOpenTag}<img src="{PhotoURL-400}" alt=" {PhotoAlt}" />{LinkCloseTag}<p class="text">REBLOG</p></div>

Answer 1

HTML:
<div id="wrapper">
<a href="{reblogurl}">
<img src="{PhotoURL-400}" alt="{PhotoAlt}" />
<p class="text">REBLOG</p>
</a>
</div>
CSS:
a
{
display: inline-block;
position: relative;
}
a img
{
height: 200px; // demo prop
widht: 150px; // demo prop
border: 0px;
opacity: 1;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
}
a:hover img
{
/*60 80*/
opacity: .40;
filter: alpha(opacity=50);
-o-transition: opacity .1s linear;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity 1.5s linear;
}
a .text
{
opacity: .60;
position: absolute;
font-size:24px;
font-weight:bold;
text-align:center;
color: red;
display: none;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
}
a:hover .text
{
display: block;
}
Demo: http://jsfiddle.net/jo_asakura/BfRpp/

Answer 2

Try using the vertical-align property.
vertical-align: middle;