koyama's blog

CSSのmargin: 0 auto;で左右の中央揃え設定しているサイトをよく見ます。でも、上下の中央揃えをmargin: auto;で設定してもうまく適用されませんでした。

先日、面白法人カヤックさんのサービスCanaryのティザーサイト（音量注意）で画像の上下中央揃えしていたのを発見したのでソースを確認してみるとmarginで設定しているのがわかりました。

ソースを見てheightを指定すればmargin: autoが設定できるのは当たり前なのかなと…。

[css]
position: absolute;
top: 0;
left: 0;
width: 400px;
right: 0;
bottom: 0;
margin: auto;
height: 400px;
[/css]