絶対配置したCSS要素を中央揃えにする2つの方法

絶対配置の CSS 要素をセンタリングする方法が2つあります。

1. 絶対配置した要素を中央に配置するには、CSS の transform プロパティを使用できます。要素の左右と上と下のオフセットをそれぞれ 50% に設定し、transform プロパティの translate() メソッドを使用して要素の位置を中央に移動できます。例:

.absolute-element {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

1. ネガティブマージンの使用：絶対配置要素を中央に配置するには、ネガティブマージンを使用できます。要素の左右と上と下マージンを要素の幅と高さの 1/2 分だけ負に設定すると、要素を中央に配置できます。例：

.absolute-element {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px; /* 假设元素宽度为100px */
margin-top: -50px; /* 假设元素高度为100px */
}

これを2通り行うことで、絶対配置された要素はその相対配置されたコンテナの中央に配置できます。