title: CSS3 transform vertical align text glitch
body: <p>I'm currently using a CSS3 vertical align method using transform to vertically align my div which contains text and text link content. Good thing is that it works, bad thing is that on chrome, the text seems to wiggle whenever the mouse hovers over the text.</p>
  
  <p>EDIT: It mostly happens with a tags, if you scroll down the test site to the image posts and hover the mouse on and off the text and then back on again, you will be able to the the wiggle easily.</p>
  
  <pre><code>Test site = http://fivdiv.tumblr.com/
  
  /*CSS*/
  .tile-text-wrapper.photo {
  position: absolute;
  right: 10px;
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%)
  }
  
  &lt;!-- HTML markup --&gt;
  &lt;div class="tile-text-wrapper photo"&gt;
      &lt;a class="tile-title photo" href="#"&gt;Link Text&lt;/a&gt;
      &lt;a class="tile-read-more photo" href="#"&gt;&lt;small&gt;Photo Post&lt;/small&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Would much appreciate if anyone could help me figure out how to get the text to stop wiggling when :hover.</p>
  
  <p>Thanks !</p>