リンクエリアなどボックス要素内の上下（高さ）中央にテキストや画像を配置する方法

高さが動的な要素について、そのエリアの上下（高さ）中央にテキストや画像を置きたい場合があります。

tableを使えば簡単に実装できますが、いくつか問題点があります。
そこで、「line-height」と「translateY」を利用した方法を紹介します。
しかしどれも万全とはいかないので、他に方法があればご教授いただけると大変助かります。

tableコーディングの問題点

容易な方法としては以下のようtableタグを使う方法がありますが、「テーブルコーディング」という言葉があるようにソースがあまりきれいではありません。

table td{
	height: 70px;
	vertical-align: middle;
}
table td a{
	background-color: pink;
	padding: 10px;
}

<table>
<tr>
<td><a href="#">リンクテキスト</a>
</td></tr>
</table>

テキストリンクボタン

テーブルコーディングを嫌い、ulタグなどでコーディングして「display table-cell」を指定する方法も見かけますが、もちろん表示結果は同じです。

ここで、テキストリンクボタンの場合、ボタンサイズを揃えたい場合がほとんどですが、aタグに「display block」と「width 200px」「height 70px」を指定すると天地中央が崩れてしまいます。

テキストリンクボタン

これではきれいに複数のボタンを並べることができません。

line-heightを使った方法

line-heightを使って同等の表現が可能です。heightとline-heightの同サイズを指定する方法です。
この方法であれば、コードがすっきりしますし、リンクエリアに縦横サイズを指定しても崩れません。

p a{
	display: block;
	width: 200px;
	height: 70px;
	line-height: 70px;
}

<p><a href="#">テキストリンクボタン</a></p>

テキストリンクボタン

しかし、この手法にも問題があり、テキストが2行以上になると崩れます。

テキストリンクボタンテキストリンクボタン

テキストが1行に限定される場合には有効かもしれません。

translateYを使った方法

最後にCSS3のtranslateYを使用した方法です。
aタグに中に1つダミーのタグを置いて、以下のように指定します。

p a{
	width: 200px;
	height: 70px;
}
p a span{
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

<p><a href="#"><span>テキストリンクボタンテキストリンクボタン</span></a></p>

テキストリンクボタンテキストリンクボタン

この方法だと、複数行テキストを設置できる上、行間の指定も可能です。
但し、CSS3を利用しているので、対応ブラウザはモダンブラウザとIE9以上です。

一筋縄ではいきませんね。
ただ、将来性を考えても、IE8以下を切り捨ててCSS3で実装する方法が良いかもしれません。