【margin:auto】センタリングする

margin:autoでは、ブロックレベル要素をセンタリング(中央配置)することができます。 センタリングする方法は色々なやり方がありますが、基本的には左右のmarginの値を「auto」に指定するとセンタリングして表示されるようになります。

※下記の書式のどれを使ってもセンタリングする事ができます。

またブロックレベル要素内のテキストの行揃え(例えば中央揃えなど)をしたい場合は、text-alignプロパティなどを使用します。

なおWindowsのInternet Explorer6以降の場合でセンタリングするには、標準モードにする必要がありますので注意して下さい。

書式

  • margin : auto ……… センタリングする
  • margin : ★ auto ……… センタリングする
  • margin : ■ auto ♥ ……… センタリングする
  • margin-left : auto; margin-rgiht : auto; ……… センタリングする

★:上下のマージン(任意の値)
■:上のマージン(任意の値)
♥:下のマージン(任意の値)

使用した時の例

.sample1 {margin: auto;}
.sample2 {margin: 15px auto;}
.sample3 {margin: 0px auto 15px;}
.sample4 {margin-left: auto; margin-right: auto;}

div {background:#F48282; width:50%;}
<div class="sample1">margin: auto</div>
<div class="sample2">margin: 15px auto</div>
<div class="sample3">margin: 0px auto 15px</div>
<div class="sample4">margin-left: auto margin-right: auto</div>

ブラウザ上の表示例

margin: auto
margin: 15px auto
margin: 0px auto 15px
margin-left: auto margin-right: auto

対応ブラウザなどのデータ

初期値 個々のプロパティを参照 値の継承 継承しない
適用可能な要素 すべての要素(tr,th,td,thead,tbody,tfoot,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報