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]

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中