margin:autoが反映されない時の対処法

初めまして。未来電子テクノロジーでインターンをしている（2020年1月退社）maec_lamarです。
今回から週に１回のペースでプログラミングについて学んだことを書いていきたいと思いますので、よろしくお願いします。
なお、プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

初回は、CSSでmargin:autoを使っているのに要素の中央揃えができないという時、どのように対処すれば良いかについて僕なりに説明したいと思います。

margin:autoが効かない原因と対処法

marginとは、要素の周りに指定した幅の余白を作るように要素のサイズを変える、CSSのプロパティです。
そして、値autoを使ってmargin:autoとすると、要素が親要素内の中央に来るように要素を移動させることができます。
しかし、そのmargin:autoが反映されないということが起きます。
その原因として、次のようなことが挙げられます。

原因１：テキストの中央揃えに使っている

test.html

<p>Qiita</p>

test.css

p {margin:auto;}

margin:autoは要素の中央揃えに使うので、上のようにしてテキストの中央揃えには使えません。
テキストの中央揃えには、下のようにプロパティtext-align:centerを使います。

test.html

<p>Qiita</p>

test.css

p {text-align:center;}

原因２：要素が親要素と同じ大きさである

test.html

<ul>
    <li>Qiita</li>
    <li>maec_lamar</li>
</ul>

test.css

ul{margin:auto;}

上のように、そのままmargin:autoを用いても、リストを中央に持っていくことはできません。
一度、borderプロパティなどを用いて要素を可視化してみましょう（Chromeをお使いの方は検証ツールを使うのも手です）。
すると、リスト要素の横幅がすでに画面一杯に広がっているので、要素の動かしようがありません。
この時は、下のように、まずリスト要素の大きさを、widthを用いてリストの大きさに合わせた上でmargin:autoを使えばリストを中央に持ってくることができます。

test.css

ul{
    width:100px;
    margin:auto;
  }

まとめ

今回は、margin:autoが使えない時の対処法について説明しました。
まずはmargin:autoとtext-align:centerの違いを理解することが大切です。
また、marginが反映されない時、一度borderなどを用いて要素を視覚化すると、原因が分かるようになることがあります。
CSSで中央揃えができないという方は参考にしてみてはいかがでしょうか。