みなさんこんにちは。Saitoです。
Webデザインで中央寄せしたいことって頻繁にありますよね。ネット検索すると左右中央寄せの記事はたくさん出ており、その手法もいろいろあります。
今回この記事では、その解決法の一つである「margin: auto;」を書いてみたのに、なぜか左右中央寄せにならないとお困りの方向けに、チェックポイントとその解説を記載していきます。
まず前提条件
こんな感じで、親要素（グレー）に対し、子要素（オレンジ）を左右の中央に配置したいとします。
上記の状態はこんな感じのソースコードで作れます。
<div class="container">
<div class="inner"></div>
</div>
<style>
.container {
background-color: #e6e6e6;
width: 500px;
height: 100px;
}
.inner {
background-color: orange;
width: 300px;
height: 80px;
margin: auto;
}
</style>
同じように、margin: auto; を使用しているのに子要素が中央寄せにならないのだとしたら、以下の点をチェックしてみてください！
チェックポイント① 親要素に指定してしまっている。
margin: auto; を記述しないといけないのは「子要素」にです！
これを親要素のCSSに記述しても左右中央寄せにはなりません。
チェックポイント② 子要素がブロック要素でない。
margin: auto; は、子要素が「ブロック要素」でないと効きません！ aタグ,imgタグであったり、CSSにdisplay: inline-block; （もしくはinline）と記述されている場合、その子要素はインライン要素になっています。
上記の例の場合、innerクラスの要素を以下のどれかの方法でブロック要素にする必要があります。
１．display: block; で、その要素をブロック要素にする。
２．もともとブロック要素であるタグを使用する。（p, divなど。ネットでそのタグのデフォルトのdisplay属性を調べてみてください。）
チェックポイント③ 子要素にposition: absolute; が指定されている。
position: absolute;が指定されていると、margin: auto;だけでは左右中央寄せされません。詳しい説明は省きますが、以下のような対策が必要です。
１．position: relative; にする。（おそらく理由があってabsoluteにしていると思うので、この変更を実施しても問題ない場合のみ有効。）
２．同じ子要素に「left: 0;」と「right: 0;」を追加する。（この解説はいずれしようと思います。）
まとめ
上記のポイントが抑えられていれば、おそらくしっかりと左右中央寄せされたのではないかなと思います。今回はmargin: auto;に絞って解説しましたが、ほかの書き方でのポイントも解説していく予定です。上記の内容で不足があればご連絡お待ちしております。
