🫠

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

に公開
CSS
tech

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%を指定する。

今回出てきたプロパティ

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

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

Discussion