cssでの中央揃え方法を学ぶ
cssでの中央揃えがいつも迷ってしまうのでまとめました！
margin: 0 auto;
親要素の幅が指定されている場合、親要素の中央に配置される。
text-align: center;
テキストや画像を中央揃えにする
ブロック要素、またはブロック要素で囲まれたテキストやインライン要素に適用
<div><p>などに囲まれたものでないとNG
justify-content: center;
親要素がdisplay: flex;で指定されている場合
水平方向で中央寄せ
align-items: center;
親要素がdisplay: flex;で指定されている場合
垂直方向で中央寄せ
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;top: 50%;left: 50%;で画面の中央に移動
要素の左上が中央に来てしまっているため、要素の中心が中央にくるように、
transform: translate(-50%, -50%);で縦・横の半分の大きさだけを移動させる。
position: absolute;
inset: 0;
margin: 0;
positionプロパティと共に使用
insetで上下左右の四方向の位置を一度に指定
place-content: center;
Flexboxやgridレイアウトを作成する際に利用
コンテンツの配置を要素の中心にする
place-items: center;
Flexboxやgridレイアウトを作成する際に利用
アイテムの配置を要素の中心にする