要素の中央寄せまとめ

前提

要素を中央に寄せる場合、まず中央寄せの対象となる要素が、以下のどれになるのか確認する

• ブロック要素

  • ex 　hタグ、divタグ、pタグ

• インライン要素

  • ex 　spanタグ、aタグ

• インラインブロック要素

  • display: inline-block;した要素

左右中央に寄せたいパターン

【インライン要素、インラインブロック要素の場合】
1,中央寄せにしたい要素の親要素に「text-align:center」
text-alignは文章の揃え位置を指定するプロパティのため、文章内に入る要素として扱われる。

【ブロック要素の場合】
1,中央寄せしたいブロック要素自体に「margin:0 auto」
marginは要素の外側の余白を指定するプロパテ。autoを指定すると、余白を自動的に計算してくれるので、中央に寄せた状態になる。

上下中央に寄せたいパターン

どこを基準に上下中央するのか確認

【インライン要素の場合】
中央寄せにしたい要素自体に「vertical-align:center」を指定。

【ブロック要素、インラインブロック要素の場合】
ブロック要素の上下中央揃えは、ブロック要素のままでは実現できない。displayプロパティを使って、要素の種類を変える必要がある。

横並びの要素を基準にするならば、インライン要素やインラインブロック要素にして、「vertical-align:cente」

親要素を基準に中央寄せしたい場合は、親要素に高さ、「display: table-cell」、「vertical-align:center」を指定。

参照
ブロックレベル要素・インライン要素の性質と違い
https://www.itra.co.jp/webmedia/block-inline-difference.html