title: Vertical align middle text without lineheight and table-cell
body: <p>I have a Teaser with a "toggle"-Animation, as can be seen <a href="http://jsfiddle.net/fu9Ln3nf/" rel="noreferrer">on JSFiddle</a> or below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ax {
      height:60px;
      width:150px;
      background:gold;
  }
   .caption {
  position: absolute;
      left:0;
    top: 35%;
    overflow: hidden;
    right: 0;
    background-color: rgba(24,88,140,0.7);
    width: 100%;
    height: 52px;
    z-index: 2;
    -o-transition: 500ms;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -ms-transition: 500ms;
    transition: 500ms;
    font-weight: lighter;
    padding: 10px;
    color: #fff;
  }
  
  a.link{
    color: #fff;
    overflow: hidden;
    width: 80%;
    margin-bottom: 30px;
    font-weight: lighter;
    font-size: 16px;
    line-height: 22px;
  }
  
   .caption:hover {
    height: 100%;
    top: 0;
  }
  .box {
      position:relative;    
      width:250px;
      height:200px;
  }
  
  /*TABLE CELL METHOD*/
  
   .caption2 {
       position: absolute;
      left:0;
    top: 35%;
    overflow: hidden;
    right: 0;
    background-color: rgba(24,88,140,0.7);
    width: 100%;
    height: 52px;
    z-index: 2;
    -o-transition: 500ms;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -ms-transition: 500ms;
    transition: 500ms;
    font-weight: lighter;
    padding: 10px;
    color: #fff;
      display:table;
     
  }
   .caption2:hover {
    height: 100%;
    top: 0;
  }
  a.link2{
      display:table-cell;
     vertical-align: middle;
  
    overflow: hidden;
    width: 80%;
    margin-bottom: 30px;
    font-weight: lighter;
    font-size: 16px;
    line-height: 22px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  &lt;div class="caption"&gt;
  &lt;a href="#" class="link"&gt;Lorem Ipsum blabla bla blahah ipsum lorem blablablahh&lt;/a&gt;
  &lt;p class="captiontext"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt; 
  &lt;/div&gt;
  &lt;/div&gt;&lt;br&gt;&lt;br
  
  &lt;br&gt;&lt;br&gt;
      table cell method (div.caption2 display:table and a.link display:table-cell + vertical-algin:middle)
      &lt;br&gt;&lt;br&gt;
          
  &lt;div class="box"&gt;
  &lt;div class="caption2"&gt;
  &lt;a class="link2" href="#"&gt;Lorem Ipsum blabla bla blahah ipsum lorem blablablahh&lt;/a&gt;
  &lt;p class="captiontext"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt; 
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to align the link in the vertical center of the blue box. The link can be a single line or two lines (at most), but it should always be centered vertically.
  The CSS property <code>lineheight</code> doesn't work with two line links, whereas the table(-cell)-method also doesn't work (see above).</p>
  
  <p>Is there any way to center both one and two line links in my box?</p>