css 親要素の中の子要素の中央寄せ

やりたいこと

• 子要素を親要素の中で縦方向に真ん中揃えにする

結論

⇨親要素に高さを指定し２つのプロパティを設定する

ポイント:このやり方は子要素がインライン要素でもブロック要素でもどちらでも大丈夫です。

• 親要素の高さを指定するheightプロパティを追加する 目的:どのくらいの範囲(高さ)の親要素の中で子要素の位置を定めるかの基準を設定する。 ↓ heightプロパティの使い方 【CSS】heightの正しい使い方 | うるチカラ

• 親要素に追加する２つのプロパティ

親要素{
       display: flex;
       align-items: center;
       }

完成コード

親要素{
       height: 220px;
       display: flex;
       align-items: center;}

まとめ

• 中央に寄せたい子要素の親要素に対してcssを設定する

• 子要素はブロックでもインライン要素でもどちらでも良い