CSSのmarginで上下の中央揃えをしてみる。

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]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です