title: Can not center text on image hover
body: <p>I am setting up a new homepage for my website. It will have a 2x2 grid of four images that change size with the window and they'll all have a hover text. I was able to do everything so far but I got stuck at one point, which possibly have an easy answer that I can't find. When I hover over the image, I want to make the text centered, no matter what the size of the window is. But I can not find the proper way to do it. The methods I've tried either don't center it both vertically and horizontally or the text goes off center when I resize the window. Any help would be appreciated. Thank you!</p>
  
  <p>Here's my code: <a href="http://jsfiddle.net/ilkergoksen/bk2Sd/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="photos"&gt;
      &lt;a href="/portfolio/test1.shtml" class="darken"&gt;&lt;img src="image1"&gt;&lt;span&gt;GALLERY ONE&lt;/span&gt;&lt;/a&gt;
      &lt;a href="/portfolio/test2.shtml" class="darken"&gt;&lt;img src="image2"&gt;&lt;span&gt;GALLERY TWO&lt;/span&gt;&lt;/a&gt;
      &lt;a href="/portfolio/test3.shtml" class="darken"&gt;&lt;img src="image3"&gt;&lt;span&gt;GALLERY THREE&lt;/span&gt;&lt;/a&gt;
      &lt;a href="/portfolio/test4.shtml" class="darken"&gt;&lt;img src="image4"&gt;&lt;span&gt;GALLERT FOUR&lt;/span&gt;&lt;/a&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  margin-left:150px;
  
  -webkit-column-count: 2;
  -webkit-column-gap:   0px;
  -moz-column-count:    2;
  -moz-column-gap:      0px;
  column-count:         2;
  column-gap:           0px;
  }
  
  #photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  }
  
  a.darken {
  display: inline-block;
  background: black;
  padding: 0;
  position:relative;  
  }
  
  a.darken img {
  display: block;
  
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
  }
  
  a.darken:hover img {
  opacity: 0.3;           
  }
  
  a.darken span{visibility:hidden; font-size:16px;}
  a.darken:hover span{color:#fff; visibility:visible;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
  }
  </code></pre>