【Other】【CSS / jQuery / javascript】DIV要素のセンタリング（中央配置）

<div>要素をセンターに配置する場合の記述方法についてです。

divはブロック要素です。
spanやaなどのインライン要素は、中央寄せをする際にtext-alignを利用します。
しかし、divなどのブロック要素にtext-alignを設定しても、指定したブロックに内包されたインライン要素は中央寄せで表示されますが、div自体を画面中央に配置することはできません。

div自体をセンタリングしたい場合は、marginの設定を変更するか、alignを使用します。

marginの設定

<div>の左右のmarginをautoにする。

記述例

(1)外部cssを使用する場合

・css

div.center{margin : 0 auto;}

・html

<div class="center">内容</center>

(2)htmlのみの場合

<div style="margin:0 auto;">内容</div>

alignの設定

<div>の属性としてalignを設定する。

html記述例：

<div align="center">内容</div>

alignの種類は下記の通りです。

• left…左寄せ
• right…右寄せ
• center…中央寄せ

まとめ

tableタグでレイアウトをしていた自分がdivというタグに出会って様々なレイアウトができるようになりました。
左右のマージンをautoにするテクニックはレスポンシブデザインでコーディングを行う際などによく利用するので、覚えておきたい基本tipsです。