CSS を使用した要素の中央揃え: 絶対位置と相対位置

CSS を使用して要素を中央に配置しようとすると、問題が発生する可能性がありますここで、 margin-left: auto と margin-right: auto は、position:Absolute では効果がないようです。ただし、これらのマージンは、position:relative が適用されている場合には機能します。

この違いは、position:Absolute が通常のドキュメント フローから要素を削除し、指定された座標に従って要素を配置する方法に由来します。このコンテキストでは、相対的なマージンを計算する「親」要素がないため、マージンを auto に設定しても効果はありません。

一方、position:relative は、ページの通常のフロー内で要素の位置を維持します。 。したがって、 margin-left: auto と margin-right: auto を使用して、要素を含む要素を基準にして要素を中央に配置できます。

絶対配置を使用して要素を水平方向に中央に配置するには、要素の幅を設定し、要素を配置します。 left と right を使用して親コンテナの左端と右端に配置し、要素が垂直方向の中央に配置されるように上下の位置を設定します。