要素を中央寄せする方法【まとめ】

更新日：2015年12月17日

ある要素を中央寄せしようと思った時に、ちょちょいのちょいっとソースを記述するも上手いこと中央寄せされない時ってありませんか？
きっと誰しもが一度は通る道なのではないかと思います。

ということで、このページでは中央寄せする方法をまとめてみましたので、
「あれ？中央寄せされないぞ？」とお悩みの方は是非お試し下さいませ。

まずは最も一般的な方法は下記ソースです。

中央寄せにしたいdiv。

#element {
	width: 300px;
	margin: 0 auto;
}

仮にelementという名前のID属性が付けられたdiv要素があった場合に、左右のmarginを自動で均等に取ってくれる為、中央寄せされるといったものです。
注意点としてはwidthを指定しなければ中央寄せされません。

何故widthの指定が必要不可欠なのかというと、divがブロック要素の為。widthを指定してあげないと、横幅いっぱいにdivが広がってしまう為、左右にmarginを取るスペースがなくなってしまうのですね。

ではレスポンシブWEBサイトの様にwidthは指定したくないけど、中央寄せにしたい場合はどうすればいいのかというと

	

	中央寄せにしたいdiv。
	

#elementWrap {
	text-align: center;
}

#element {
	display: inline-block;
}

と記述すれば解決します。

#elementにdisplay: inline-block;を指定することで、#elementWrapのtext-align: center;が効くようになります。
通常ブロック要素にtext-align: center;は適用されないのですが、widthとheightを持ちながらも尚且つインライン要素になれるCSS、display: inline-block;がそれを可能にさせています。

#elementの中にあるテキストや画像を中央寄せする場合は、単純に

中央寄せにしたいテキスト。

#element {
	text-align: center;
}

とするだけでOK。
何故ならテキストや画像はインライン要素だからです。

ちなみに下記のようなHTMLでも中央寄せにすることが出来ますが、お勧め出来ません。

中央寄せにしたいdiv。

align="center"は非推奨タグなので、使うのが好ましくないとされているからです。
もしも使っている方がいれば、今後はCSSで中央寄せする習慣をつけましょう。

いかがでしたでしょうか？
中央寄せする際にはその要素がブロック要素であるかインライン要素であるかを判断した上でソースを記述すれば「あれ？」となることはないはずです。