ブロック要素を中央寄せしたい場合①
ずばり!
親要素にCSSを追加しよう!
/*親要素の該当部分*/
display: flex;
align-items: center;
justify-content: center;
/*インライン要素を中央寄せしたい場合も親要素に指定*/
text-align: center;
ブロック要素を中央寄せしたい場合②
中央寄せしたい要素に margin : 0 autoを付与するよ!
親要素には手を加えなくてOK!
【重要】外枠のdiv領域のサイズ指定をする
div領域は、デフォルトでは領域が存在しません。
領域内に文字列や他要素があると、その分だけ高さが確保され、幅が100%広がります。
状況に応じて、枠内のコンテンツよりも大きめのサイズでheight と width を指定して外枠を明確にしましょう。