Centring Wordpress post title within responsive layout

Question

I am trying to create a portfolio page which displays images of my design projects, each image is a link to a page about the project.

The page is a two column responsive layout. The title of the projects appear on top of the images upon hover.

My problem is that in order to get the title of the project to appear over the image I had to absolutely position it. Which means that now I can't center it within the frame. Any ideas how I can do that? I can give it a percentage but it'll change it's position upon resizing...

This is my code:

<div class="img">
  <a title="<?=$title?>" href="<?=$site[0]?>">
   <?php the_post_thumbnail(); ?>
  </a>
 <span class="itemTitle"><?php the_title(); ?></span>
</div>

This is my css:

.img {
    position: relative;
}

.img span { 
    visibility: hidden; 
    pointer-events: none;
}

.img:hover span { 
    visibility: visible; 
    transition: 0.1s;   
    -webkit-transition: 0.1s;
}

.itemTitle {
    position: absolute;
    top: 42%;
    text-transform: uppercase;
    font-size:40px;
    font-family: 'Verlag A', 'Verlag B'; font-weight: 800; font-style: normal;
    text-align: center;
}

This is a link to the page I am working on : http://www.fredericdesign.net/newsite/work/

Answer 1

Do this:

.itemTitle {
    font-family: 'Verlag A','Verlag B';
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    position: absolute;
    text-transform: uppercase;
    top: 42%;
    /*new*/
    right: 0;
    left: 0;
    text-align: center;
}