CSSで要素を横方向に中央揃えの方法
親要素内で要素を中央に配置するには、いくつかの方法があります:
- 絶対位置と負のマージンを使用する
- child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} - 絶対配置と margin:autoの使用:
- 親要素 {
相対位置;
}子要素 {
絶対位置;
上: 0;
右: 0;
下: 0;
左: 0;
余白: 自動;
} - フレックスレイアウトを使用する:
- 親要素 { display: flex; justify-content: center; align-items: center; }
これらの方法は、親要素内で要素を水平と垂直に中央揃えにすることができます。状況に応じて適した方法を選択してください。