完全中央寄せ3手法
完全中央寄せは、ボックスを親の縦横どちらの中心にもぴたりと置くレイアウトです。このサンプルは親に display:grid と place-items:center を指定する手法を採用しており、わずか1行で水平・垂直の両方向を同時に中央へ揃えます。
解説
完全中央寄せは、ボックスを親の縦横どちらの中心にもぴたりと置くレイアウトです。このサンプルは親に display:grid と place-items:center を指定する手法を採用しており、わずか1行で水平・垂直の両方向を同時に中央へ揃えます。中身の要素のサイズが変わっても自動で中心が保たれるため、計算や位置調整が不要で崩れにくいのが利点です。
使う場面
- モーダルやダイアログを画面中央に出したいとき
- ローディング表示や空状態のメッセージの配置
- ヒーローのキャッチコピーをブロック中央に置きたいとき
中央寄せには他にも、Flexboxで display:flex; justify-content:center; align-items:center とする方法や、position:absolute と transform:translate(-50%,-50%) で中心へ引き戻す方法があります。今回の place-items:center は記述量が最も少なく、子要素が複数あっても扱いやすい現代的なやり方です。中身の余白は .ca__b の padding で調整できます。
よくある質問
中央寄せの方法はこれだけですか
他にもFlexboxで justify-content と align-items を center にする方法や、position absolute と transform で中心へ寄せる方法があります。このサンプルはgridの place-items center を使う最短の書き方です。
中央のボックスの大きさは変えられますか
中のボックスの padding を変えると大きさが変わり、それでも親の中心に保たれます。サイズを変更しても位置の再調整は不要です。