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

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

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. 最后，我用锚标记将内部div包裹起来<a>以链接按钮：

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

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

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