Html 添加链接时，DIV失去垂直对齐。我如何保持它在中间垂直对齐？

我有一张桌子，其中一间牢房里有一个按钮。当我将按钮设置为链接时，整个按钮将重新与单元格顶部对齐。我怎么能保持在中间？

<table class="table-class-1">
  <tr>
    <td class="td-class-1"><a href="/link"><div class="div-class-1">TEXT IN DIV</div></a>
    </td>
  </tr>
</table>               

.table-class-1 {
    max-width:550px;
    margin: auto;
}

.td-class-1 {
    text-align: center; 
    vertical-align: middle;
}


.div-class-1 {
    background-color: #GGGGGG;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    padding: 5px;
    font-size: 18px;
}

.表1-class-1{
最大宽度：550px；
保证金：自动；
}
.td-class-1{
文本对齐：居中；
垂直对齐：中间对齐；
}
.第一组{
背景色：#GGGGGG；
颜色：#fff；
文本对齐：居中；
垂直对齐：中间对齐；
边界半径：6px；
填充物：5px；
字号：18px；
}

您可以尝试以下方法：

<table class="table-class-1">
  <tr>
    <td class="td-class-1"><a href="/link"><div class="div-class-1">TEXT IN DIV</div></a>
    </td>
  </tr>
</table> 

---

祝你好运……

使用，

显示：表格单元格

除了

*{margin:0；padding:0；}html，body，table{height:100%；width:100%；}之外，我不知道这里有什么不同

我不确定这对显示有什么影响，或者我如何将其添加到CSS中。我的假设是，它以某种方式定义了模块的实际高度，但我无法做到

高度：100%在我的页面上。高度由内部内容和屏幕大小动态确定。
**This would help you. Simple and promising :) 
Check out  : http://jsfiddle.net/bV253/2/