CSSメモ　中央に配置する方法

いつもコーディングするとき中央に配置する方法がmargin:0 autoだっけ？text-aline:centerでいいんだっけ？flex-boxの時はどうするんだっけ？？？
と迷っている私。
ここで一度違いを確認して基礎中の基礎マスターをマスターしたいと思う。

---

margin:0 auto

display:blockの要素を中央揃えにする
display:block＝divタグ,pタグ,h1～h6など縦に並ぶ要素

＊まず要素自体の幅を設定する必要がある！！！！
＊marginのtopやbuttomに余白を持ちたい時は0marginではなくmargin:20px auto；等余白を記述してOK！

---

text-aline:center

display:blockの要素内のコンテンツ（中身）
＝display:inline要素を中央揃えにする
display:inline＝imgタグ,aタグ,spanタグ

＊中央寄せしたい要素の親要素（display:block）に指定する

---

margin:0 autoとtext-aline:centerの組み合わせ

margin:0 auto が箱自体を中央揃えにするだけなので、その中身(子要素＝インライン)は中央揃えになっていない。もし中身も中央揃えにしたい場合はtext-aline:centerを組み合わせて使う

---

justify-content:center

display:flex で横並びにした中身（子要素）ものを中央揃えにしたい場合はjustify-content:centerを指定する

---

display:gridを使った縦横中央揃え

display: grid;
place-items: center;

この2行で左右中央ぞろえになる

place-itemsプロパティはalign-itemsプロパティとjustify-itemsプロパティを一括指定できるショートハンドプロパティ。
place-itemsプロパティは2つの値が指定でき、
1つ目の値にalign-itemsプロパティへの指定、
2つ目の値にはjustify-itemsプロパティへの指定が行う。
そして、値を1つしか指定していない場合には、どちらにもその値が使われる。
つまり、
place-items: center;　は　align-items: center;　と　justify-items: center;を一行で表したものになる。