CSSで要素を上下左右中央寄せする方法（Flexbox）
いまの中央寄せの定番はFlexboxです。親要素に3行書くだけで上下左右の中央に置けます。
上下左右の中央寄せ（Flexbox）
.parent {
display: flex;
justify-content: center; /* 横方向 */
align-items: center; /* 縦方向 */
height: 100vh; /* 高さがあること */
}Gridでも書ける
.parent {
display: grid;
place-items: center;
height: 100vh;
}ポイント
- 縦中央には親に高さが必要（無いと中央にならない）。
- テキストだけ横中央なら
text-align: center;でOK。
よくある質問
縦中央にならないのはなぜ？
親要素に高さが無いと、縦方向の中央寄せが効きません。height: 100vh などで高さを与えると中央に配置されます。
FlexとGridどちらが良い？
1要素を中央に置くだけならどちらでも可能です。place-items: center のGridは記述が短く、複数要素の整列はFlexが扱いやすいです。