链接中水平和垂直的 HTML-CSS 居中文本

Question

我正在尝试创建一个链接，其中有一个 height 和一个 width 200px。链接的文本应垂直和水平居中。

到目前为止，这是我的 CSS：

 a:link.Kachel {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  text-align: center;
  background: #383838;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
}

这是 HTML 代码：

 <tr>
  <td>
    <a class="Kachel" href="#">Test</a>
  </td>
</tr>

文本水平居中但不是垂直居中。

知道如何使文本水平和垂直居中吗？

原文由 user1567896 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

删除其他所有内容，然后将 height 替换为 line-height

 a:link.Kachel{
   width: 200px;
   line-height: 200px;
   display: block;
   text-align: center;
   background: #383838;
}

jsfiddle：http: //jsfiddle.net/6jSFY/

原文由 Eric Goncalves 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 CSS3 中，您可以使用 flexbox 来实现这一点，而无需任何额外元素。

 .link {
    display: flex;
    justify-content: center;
    align-items: center;
}

原文由 Kilves 发布，翻译遵循 CC BY-SA 4.0 许可协议