ページタイトル部分を縦中央でセンタリングしたい時

普段、会社で（実は自宅でも）使っているメインブラウザは、現在Google Chromeです。
Firefoxとの間で何度も浮気を繰り返してはいたのですが……軽さには勝てない！
恐らく機能重視ならFirefoxなんだろうな〜とは思うんですけどね。
ブログを 観察 チェックするのが好きな私は、igoogleを愛用しているので（なんでやめちゃうんだ！）、便宜的な意味でもGoogle Chrome。

それはいいとして。
タイトル部分に背景画像を設定し、タイトル文字を縦中央位置に表示させたい場合

こんな感じの。
悲しいことに、スタイルシート（CSS）には縦方向のセンタリングはできないので、多少小細工が必要となります。
私はいつも

[code lang=”js”]height:（画像の高さ）px;
line-height:（画像の高さ）px;[/code]

文字が1行の時のみ使える手です。

これで解決していたのです。
いや、解決した気になっていたのです。

ですがそんなある日（っていうか今日）、Firefox（とSafari）愛用の社長に「タイトル部分おかしいよ」と言われ
確認してみたところ

なぁ〜にぃ〜！？

上のCSSは、Firefox、Safari、Operaにはあんまり効かないらしいですね。
この場合

[code lang=”js”]display: table-cell;
vertical-align: middle;[/code]

これで解決しました。
いや、こっちを試したこともあるのですが、その時はうまくいかなかったので、「ガセかよ…」と思って通り抜けてしまったのですよ。
ごめんねtable-cell。

ちなみに、どこかで言われていた
display:table-cell を使うには、親要素で display:table を指定しなければいけない
という問題は、今のところ浮上していません。多分なくても使えます。

【ハートブレーン】https://blog.heart-kokoro.net/