【HTML/CSS】CSSで要素or複数要素を中央に持ってくる方法の研究

CSSでコンテンツを中央に持ってくる方法は二通り知っているのですが、その2つのやり方を復習もかねて書いてみます。

まずは justify-content: center; になります。

こちらはdisplay: flex; をかけることによって記述することができるものになります。(display: flex;とは子要素を左詰めにするプロパティです。)どちらも中央寄せにしたい要素の親要素に記述することで適用されます。しかし、この場合display: flex;をかけると、子要素が左詰めになってしまうため、複数個ある子要素をそれぞれ中央にしたいとおもったときは使えません。

そんな時に使うのが、もうひとつの中央に揃える方法、margin: auto;になります。こちらは中央にしたい要素に直接記述します。これを書くだけで左右のmarginを均等に分配してくれるため、中央に要素が持ってこれます。コツとしては、複数要素の場合はそれを囲うようにして親要素を追加しその親要素にmargin: auto;を記述することです。そうすることで要素が縦に並んだまま全て中央にきます。注意点として、margin: auto;をかける場合その要素のwidthが定義されていないと反映されないというということが挙げられます。こちらに注意して使用してみましょう。

今回はCSSで要素を中央に持ってくる方法について書かせて頂きました。他にもpositionを使った方法などございますが、それについては別途書いて見たいと思います。ありがとうございました。

shinshi_onigoori