cssで画面中央寄せにする方法3選

スクリーンショット-2015-10-03-11.07.29

ボックスを画面の中央に表示したい時ってありますよね!
僕の場合はポップアップを作成するときによくあります!

だけど、これって意外と難しい。
慣れてしまえば簡単なんですけど、初めてこれを実装しようとすると少し手間取ってしまいます。

ということでこれを実装する方法を3つ(+1)紹介したいと思います!

ちなみにDEMOページを作成しました。
見ていただけるとわかると思うんですが、画面が大きくわけて3つに分かれています。
・右が今反映されているcssのコード(ここは編集可能です)
・左上が縦横中央寄せにするコード3つ
・左下が右のcssで作成されてたhtml画面になります。
よかったら見てください!

さぁ、本編に戻って縦横中央寄せの方法を解説していきたいと思います。

ボックスが固定幅の場合
ボックスが固定幅(width:200px;height:200px;)の場合は2つ方法があります。
1.margin-left、margin-topにマイナスのマージンを取る方法

まずposition:absolute;で絶対位置指定するように宣言します。
そしてtop:50%;left:50%;という指定をします。
この状態では、boxの右上が画面上から50%、画面左から50%の位置にある状態です。
この状態ではこんな感じです。
スクリーンショット 2015-10-03 10.24.25

中心からちょっとずれてますね!
今boxの左上がちょうど画面の中心に来ているので、あとはボックスの幅の半分ずつ上と左にずらしてあげればボックスの中心が画面の中心に来ます!
そこでmargin-left:-100px(widthの半分);margin-top:-100px(heightの半分);を指定してあげるとちょうど画面の中心に来ます。

スクリーンショット 2015-10-03 10.34.33

※なんでmargin-left:-50%;じゃダメなの?
っていう質問が出そうなのですが、marginを%指定する場合、%の基準は自分を囲っている包含ブロックを基準に考えてしまいます。
つまりmargin-leftで自分の半分を指定することは絶対値指定じゃないとできないです。

2.top:0;left:0;bottom:0;right:0;margin:auto;を指定する方法
すいません上手いタイトルが思いつきませんでした(笑)

これに関しては詳しい説明が書いてある記事があるのでそちらを参考にされて下さい!
position: absolute; の指定で要素が上下左右中央配置になる理由

ちなみに画面はこんな感じになります。

スクリーンショット 2015-10-03 10.46.10

先ほどと結果画面は同じですね!
ちなみに、この方法のいいところは、ボックスが画面サイズより大きくなっても位置がずれないことです!

ボックスが可変幅の場合
1.transform使う方法

この方法は途中まで固定幅の方法と一緒です。
absoluteにして50%の位置までずらしています。
その後、css3で追加されたtransformというcssのプロパテイを指定してtranslateで「自分の幅」の50%分マイナス方向に移動しています。
ここでのポイントはtransformプロパティは「自分の幅」を基準に移動できるということです。
margin-leftにマイナスを取る場合は絶対指定(-○○px)などでなくてはなリませんでした。
つまり可変の幅(中に何が入るかわからず幅が決められない)の時には使えない方法だったんです。
しかしこの方法であれば中に何が入ろうが関係ないです。
問題なく動きます。

スクリーンショット 2015-10-03 10.57.04

DEMOページでboxの中身をいろいろ変えて見て下さい!
中央の寄ったままだと思います!

※transitionプロパティって聞いたことないけどどのブラウザでも動くの?
一応モダンブラウザではしっかり動きます。

スクリーンショット 2015-10-03 10.58.37

モダンブラウザ対応だけで問題ない場合はこちらを使ってみてはいかがでしょうか?

・まとめ
意外と縦横中央寄せの方法って知られてないのではないかなぁと思って今回まとめてみました。
実はもう一つdisplay:table;とtable-cellを使って縦横中央寄せにする方法もあったのですが、不要な包含ブロックを増やす必要があったので省略しました。
もっといい方法があるよ!って方はコメントしていただけると嬉しいです!
他にも今後まとめていくのでよろしくお願いしますー!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク