html - 垂直方向に整列できません: 中央の絶対配置ブロック テキスト

Question

ブロックの途中でいくつかの h2 テキストを垂直方向に揃えるのに問題があります。

基本的に、ホバー時に画像の上に表示される数行にまたがるさまざまな量のテキストを含む、高さがすべて同じ幅 (300px) の画像が多数あります。

私がやりたいのは、このテキストを中央に垂直に揃えることです...

彼はデモ
http://jsfiddle.net/wn3Kj/2/

<div class="post-thumb">            
      <a href="http://eclectivism.com/text/">
          <h2 class="entry-title">Text text  text  text  text  text  text  text  text text text text text text text text text text text text text text text text</h2>
          <img src="http://eclectivism.com/wp-content/uploads/2013/09/space-doodle-01-580x7041.jpg" class="attachment-blog-large wp-post-image" />
      </a>
</div>

CSS

.post-thumb {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent; }

a {position: relative; display: inline-block; }

h2 {
    opacity: 0;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 0px;
    padding-top: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: rgba(214,238,219,0.8);
    color: #fff;
    text-decoration: none;
    text-shadow: 0px 1px 5px rgb(63, 97, 56);
    text-align:center;
    display:block;
}

img {
    width: 300px;
}

a:hover  h2 {opacity:1}