html - 完全にクリック可能なテーブル セルのテキストを中央揃え

Question

残念ながら、私はまだCSSが得意ではありません。

完全にクリック可能なテーブルセルに、水平および垂直に中央揃えされたテキストリンクを取得するにはどうすればよいですか?

私は調査し、いくつかの解決策を試しましたが、どれもうまくいきませんでした。これまでの私の最善のアプローチは次のとおりです。

HTML

<table class="dataTable">
<thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <a href="#">I wanne be centered!</a>
        </td>
        <td>
            <a href="#">Me too!</a>
        </td>
    </tr>
</tbody>
</table>

CSS

.dataTable td a {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    display:block;
    text-decoration: none;
}

.dataTable td {
    display:inline-block;
}

これにより、テキストが中央に配置されますが、リンクはセルの幅のみをカバーし、高さはカバーしません。リンクの css を display:inline-block に変更すると、セル全体がクリック可能になりますが、テキストは垂直方向に中央揃えされなくなります。

両方必要です。ヘルプ！