如何创建具有固定高度和宽度以及居中文本的锚点按钮？

Question

这看起来似乎微不足道，但我经历了许多提议的解决方案，却一无所获。目标是创建一个具有固定高度和宽度的锚<a>按钮，同时保持文本居中（垂直和水平），而不管文本的宽度。

示例：

Answer 1

我达到的最佳解决方案如下：

1. 定义垂直中心类：

   .text-vertical-center {
       display: table-cell;
       text-align: center;
       vertical-align: middle;}
   

   这用作按钮的内部容器，用于垂直和水平居中文本。

2. 定义一个btn类：

   .btn {
       width: 300px;
       height: 75px;
       background-color: transparent;
       color: #000;
       border-radius: 0;
       border: #000 solid 1px;
       cursor: pointer;
       text-align: center;}
   

   用于设置按钮样式的类btn服务器。

3. 我最后用一个锚标记<a>包裹了内部div来链接按钮：

<a href="#">
  <div class="btn text-vertical-center">
      Button text
  </div>
</a>

据我所知，这似乎工作正常并且与大多数浏览器兼容。如果有更好的解决方案，请告诉我。

JSFiddle示例：https://jsfiddle.net/MuaazO/ga4s540v/