【CSS】上下中央揃えにする方法2選！【flexbox】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回は上下中央揃えする方法2選について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

1分で上下中央揃えをマスターできる

１分で理解できるHTML/CSS講座シリーズはじめっ！

フレックスボックスを用いて上下中央揃え
絶対位置を指定して上下中央揃え
まとめ

フレックスボックスを用いて上下中央揃え

1つ目の方法はフレックスボックスを用いて
上下中央揃えする方法です。

重要なポイントは以下の部分です。

See the Pen
上下中央揃え:フレックスボックス by samehack (@samehack)
on CodePen.

.親要素 {
  /* フレックスボックスの指定 */
  display: flex;
  /* 垂直方向の配置指定 */
  align-items: center;
}

ちなみに、justify-content:centerを追加で指定すると
上下左右中央揃えになるよ！

絶対位置を指定して上下中央揃え

2つ目の方法は親要素に対する絶対位置を指定して
上下中央揃えする方法です。

See the Pen
Untitled by samehack (@samehack)
on CodePen.

重要なポイントは以下の部分です。

.親要素 {
  /* 相対位置設定 */
  position: relative;
}

.子要素 {
  /* 親要素に対する絶対位置指定 */
  position: absolute;
  /* 上から50% */
  top: 50%;
  /* 自分の要素の-50%分をY軸方向に移動 */
  transform: translateY(-50%);
}

絶対位置について詳しく知りたい方はこちら！

【CSS】画像の上に文字を重ねよう【relative, absolute, transform】

この記事を読むと・・・ 1分で要素を重ねる事ができる 1分で文字を画像の中心に配置することができる 1分でtransformの使い方がわかる

top: 50%;だけだと中心には来ないから注意だよ！

まとめ

フレックスボックスで、align-items:center;を指定する
top: 50%; transform: translateY(-50%);を用いて絶対位置指定

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram