固定された高さと幅と中央揃えのテキストでアンカーボタンを作成するにはどうすればよいですか？

Question

これは些細かもしれませんが、私は多くの提案された解決策を経て、何も見つかりませんでした。目標は、テキストの幅に関係なくテキストを中央に（縦と横に）保ちながら、高さと幅を固定したアンカー<a>ボタンを作成することです。

例：私は達し

Answer 1

最善の解決策は、以下の通りであった：

1. 垂直中心クラスを定義します。

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

   これは、内側容器を務めましたテキストを垂直方向と水平方向の中央に配置するボタン同盟国。ボタンをスタイリングのための

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

   クラスBTNサーバ：

2. はBTNクラスを定義します。

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

これは正常に動作するようですし、私限り、ほとんどのブラウザと互換性があります

は、私は最終的にボタンをリンクするアンカータグ<a>と、内側のdivを包ん知っている。より良い解決策があれば教えてください。

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