Vertical Align Text Over Image With 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}<a href="{reblogurl}"><img src="{PhotoURL-400}" alt="      {PhotoAlt}" />{LinkCloseTag}<p class="text">REBLOG</p></div></a>

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/