親要素の中心で愛を叫ぶためのCSSのｶｷｶﾀ

Webページを模写する際、要素の配置に苦労したので、
CSSをつかって要素を真ん中に揃える方法をまとめまて見ました！

左右をそろえるテク

子要素がインライン、インラインブロックの場合

text-align: center

子要素にtext-align: center;を設定する

子要素がブロックの場合

margin: 0 auto

1. 子要素に任意のwidthを指定する。
2. 子要素にmargin: 0 autoを設定する

display: inline-block

1.親要素にtext-align: center;を設定する
2.子要素にdisplay: inline-blockを設定する

display: flex

1. 親要素にdisplay: flex;を設定する
2. 親要素にjustify-content: centerを設定する

上下をそろえるテク

子要素がブロックの場合

display: flex

1. 親要素にdisplay: flex;を設定する
2. 親要素にalign-items: center;を設定する

上下左右どちらにも使えるテク

positionプロパティを使う

1. 基準にしたい親要素にposition: relativeを設定する。
2. 子要素にposition: absoluteを設定する。
3. 上下を中央ぞろえにする場合、子要素にtop: 50%を指定する。
4. 左右を中央ぞろえにする場合、子要素にleft: 50%を指定する。

子要素が基準にするのは、position: relativeの設定されている親要素の中で一番内側の親要素となる。複数の要素にposition: relativeを使用する場合注意が必要かもしれません！

今回出てきたプロパティ

• text-align: center
• margin: 0 auto
• display: flex
  • justify-content: center
  • align-items: center
• position: absolute
• position: relative

以上、要素を上下左右で中央に揃える方法でした。
いろいろな方法があるので、最適な選択肢をとれるようにしていきたいです。