なるWeb 
どうも7noteです。インライン要素とブロック要素では中央寄せの考え方が違うお話。
中央寄せにするとき、いくつかの方法がありますが間違えずに使いこなせている自身はありますか？
中央寄せといっても、marginを使うこともあれば、text-alignでcenterを指定することもあります。
その中でも初心者の方が特に躓きやすいブロック要素とインライン要素では中央寄せの仕方が異なる事と、中央寄せする時の考え方の違いについて解説していきたいと思います。
ブロック要素とインライン要素の違い
今回の話をする上でブロック要素とインライン要素の違いを理解していなければかき分ける事ができないので、まずは簡単にこの要素の違いを理解しておきましょう。
ブロック要素
（div, p, ul, li, hタグなど）
- 横幅、高さを指定できる
- marginは4方向とも指定できる。
インライン要素
（a, span, img, brなど）
- 横幅、高さを指定できない
- 上下にmarginを取ることはできない
他にも違いはありますが、関係してくる事は上記になります。
またそのうちブロック要素とインライン要素の違いについてはちゃんと記事にまとめたいと思ってます。
ブロック要素を中央寄せにする方法
一番オーソドックスな左右中央寄せの方法
「margin: 0 auto;」を使う方法
<div class="square"><!-- 400px × 400pxの四角形 --></div>.square {
width: 400px; /* ブロック要素は初期値がautoなので、数値を指定 */
height: 400px; /* ブロック要素は初期値がautoなので、数値を指定 */
background: #00F; /* 見やすいように青色を指定 */
margin: 0 auto; /* 左右のmarginを自動（auto） */
}
これがブロック要素を左右中央寄せにする時の一番オーソドックスなやり方です。
要素の左右のmarginをどちらも自動で取るように指定することで、要素が左右の中央に配置されます。
左右中央に配置したブロック要素には必ず横幅を指定するようにしてください。
widthの値がauto（初期値）や100%だと中央寄せにはならないので注意！
ブロック要素を中央寄せにする方法2
positionを使って要素を真ん中に。
「position: absplute;」を使う方法
<div class="box">
<div class="square"><!-- 400px × 400pxの四角形 --></div>
</div>.box {
width: 800px;
height: 400px;
background: #CCC; /*背景色に灰色を指定*/
position: relative; /* この要素を基準とする */
}
.square {
width: 400px; /* ブロック要素は初期値がautoなので、数値を指定 */
background: #00F; /* 見やすいように青色を指定 */
position: absolute; /* 基準から指定の位置に動かすための記述 */
top: 0; /* 上から0pxの位置 */
left: 200px; /* 左から200pxの位置 */
}
「posotion: absolute;」を使えば中央だけでなく、自由な位置に配置できます。
「posotion: absolute;」であれば上下左右中央にもできます。
詳しいやり方はこちら↓
【初心者でもわかる】position: absolute;を使ってチキンラーメンの卵をど真ん中（上下左右中央）に落とす方法
インライン要素を中央寄せにする方法
<p><span>あいうえお</span></p> <!-- この場合はspanが無くても効くよ -->p {
text-align: center;/* 左右を中央寄せにする */
}
中央寄せした要素の親要素に対して、「text-align: center;」を使います。
中央寄せする時の考え方の違い
ブロック要素を中央寄せする際は中央寄せしたい要素自身に対して、「margin: 0 auto;」や「position: absolute;」を指定します。
ブロック要素は、この要素を中央寄せにする。という意識をもって書くと、間違いがありません。
インライン要素を中央寄せする際は、中央寄せにしたい要素の親要素に対して「text-align: center;」を指定します。
インライン要素自身に「text-align: center」を当てたり、「margin: 0 auto;」を指定しても中央には寄らないので注意してください。「text-align: center;」は、親要素に対して使用します。指定された要素の子要素（インライン要素）が左右中央に配置されます。
まとめ
どちらの要素を寄せるときも「中央寄せ」という言葉になってしまうので、検索しても誤った方を参考にして上手く中央寄せできずにあきらめてしまう人を何人かみてきました。
まずは自分が中央寄せにしたい要素がインライン要素なのか。ブロック要素なのか。これを判断してから、調べられると最適な答えがすぐに見つかります。
基礎知識の大切さはこういう場面で出てくるものですね。
