NOBODY:PLACE

要点だけ書くと、

1. ページ全体に高さを設定
2. 上要素（スペーサー）はページ全体の半分に配置（下辺が半分の位置）
3. 下要素の高さを指定
4. 下要素は高さの半分だけ、上方に移動

ということらしい。

確かに、そのようになる…のだけど、
ソースを眺めててちょっと疑問。

僕にとっての垂直中央配置、ってのは、
画面の中央線と、要素の中央線が一致すること、なのだけど、
実はこのソースではそうはならない。


■ 僕の考える垂直中央配置




■ このソースでの垂直中央配置




要は、このソースの通りに書くと、
スペーサーが、要素の高さの半分だけ上方に移動しているために、
ページの中央線が、要素の下辺に接していることになる。
ソースで言うと、この部分。

div#shiv { 

background: transparent; 

width: 100%; 

height: 50%; 

margin-top: -50px; 

float: left; 

} 

まぁ、CSSで垂直を設定できるよ、というのが、該当エントリの趣旨なので、
ソースの結果が中央かどうかなんてことは些末なことでしかないのだけれども、
これって、なんか意味あるのかなぁ…と思って。


今はもう、このCSSをサイト全体に適用することはないけど、
（もうこの体裁になれてしまったし）
もし、何らかのデザインを要求される作業があったときには、
垂直線を一致させる方向で、コードを書くことになるかなぁ、と思う。

■ 追記

あ、あと、もう1点。

表示要素の高さを、あらかじめ指定しておく必要があると言うこと。

画像なんかだったら、容易ではある。
でも、テキストだったら…ねぇ？
高さが不確定な要素に対しては、あんまり現実的ではない。

スクロールバーを機能させれば別だけど、
IEであれ、Geckoであれ、
テキストの量が増えれば、高さは溢れてしまうわけで。
（幅は、普通は溢れないことになってるはずだけど）

かといって、高さに対するマージンを多く見積もったら、
今度は垂直中央配置のズレが大きくなってしまう。
枠としては中央配置だけど、見た感じそうは見えないという。

前述の力ワザみたいに、
要素の高さを測るという手もあるけれども、
CSSを動的に作成する必要があるよな。
JavaScriptでごにょごにょとか。
そうなると、本末転倒…


やっぱり、垂直中央配置ってのは、
HTMLにおいては、ある程度諦めることなのかなぁ、と思う。。

もちろん、方法の模索は常に面白いのだけどね。