CSSで要素を左右中央にレイアウトする方法/text-align、margin:0 auto;の使い方

基本的にCSSで要素を中央に配置したい場合、display:inlineならtext-align、display:blockならmarginを使います。

display:inlineとblock

displayプロパティについては、inline-blockの記事が参考になるかもしれません。

<span>display:inlineの要素</span>をテキストの中に入れても改行されない
↓
display:inlineの要素をテキストの中に入れても改行されない

display:inlineの要素というのは、<a>や<span>、<img>など、挿入しても自動的に改行されないHTMLタグのことです。

display:blockの要素は<p>改行される</p>
↓
display:blockの要素は

改行される

これに対し、<p>や<div>、<table>などのdisplay:blockの要素は基本的に1行につきひとつしか存在できません。

これに対し、改行せずに横に並べることもできる上に、本来inlineにはできないサイズの調整などもできるようになったフレキシブルな状態がinline-blockです。
それぞれ、CSSでdisplayプロパティにinline、block、inline-blockを指定すれば変更できます。

要素をinline、block、inline-blockにする
display:inline;
display:block;
display:inline-block;

ここからが本題です。

inline、inline-blockの要素を中央に寄せて表示するには、CSSのtext-alignプロパティをcenterにセットします。leftで左寄せ、rightで右寄せにすることもできます。

ブロック内部の要素を中央に配置
text-align:center;

ちょっと使い方に癖があります。

<span style = “text-align:center>
中央に寄せたい文章</span>
↓

中央に寄せたい文章

text-alignは、直接中央に寄せたい要素に指定しても効きません。

<div style = “text-align:center>
中央に寄せたい文章</div>
↓
中央に寄せたい文章

親要素（display:block）にtext-alignを使用した後、inlineかinline-blockの要素を中に入れると中央に配置されます。

という疑問を感じたのですが、これは「pの中にある要素」だけが中央に移動していて、pタグそのものは別に移動してないんだそうです。
わかりやすいようにpタグにborderを引いて、text-alignをかけてみます。


<p class = "ctr">中央に寄せる文章</p>

/*CSS*/
.ctr{
border:1px solid black;
text-align:center;
}

中央に寄せる文章

するとこういうことになり、なるほどpタグは横いっぱいに広がって微動だにしていないことがわかります。

text-alignは、display:blockの要素に対して指定して、その内部のdisplay:inlineの要素の配置を決定することができるプロパティと定義されています。
ではdisplay:blockの要素を中央に配置したい場合はどうするかというと、marginを使用します。

要素の外側の余白を指定
margin:値;

marginやpaddingに値をふたつ指定すると、上下、左右の意味になります。左右の値にautoを使用すると、親要素と自分の間の余白を左右均等にmarginが埋めるため、親要素の左右から見てまんなかにdisplay:blockの要素が配置されます。

内側のdivのmarginは10pxです。

内側のdivのmarginは10px autoです。

内側のdivのmarginはauto autoです。
(縦軸にautoは使えない)

真ん中

display:inlineの要素をこの方法で中心に配置することはできません。
（余白がないため。autoだと0と同じになる）

真ん中真ん中

display:inlineでもmarginは使用可能ですが、左右のみ有効です。
（図はmargin:10px指定）

以上、要素を左右から見てまんなかに配置する代表的なやり方ふたつでした。