【CSS】超簡単に上下中央揃えにする方法2選!【flexbox】

HTML-CSS

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

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

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

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

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

この記事を読むと・・・
  • 1分で上下中央揃えをマスターできる
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フォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました