「margin: auto」が要素を絶対的に中央に配置しない、または固定配置されないのはなぜですか?

配置された要素の中央揃え: 'margin: auto' を超えて

CSS では、margin: auto プロパティを使用して要素を中央揃えにするのは難しい場合があります。絶対的に配置された要素または固定された要素を扱います。この動作を理解するには、CSS 仕様を詳しく調べる必要があります。

フロー内要素のセンタリング

フロー内要素の場合 (絶対配置または固定配置なし)、 margin-left と margin-right の両方を auto に設定すると、それを含むブロックに対して水平方向のセンタリングが実現されます。これが機能するのは、CSS 仕様により、両方のマージンが auto に設定されている場合は等しくなければならず、その結果、要素が中央に配置されるよう規定されているためです。

絶対および固定要素の中央揃え

ただし、絶対要素や固定要素となると話は異なります。 CSS 仕様では、次のように規定されています。

• left、width、right の 3 つすべてが auto の場合、margin-left と margin-right の値は 0 に設定され、自動中央揃えが防止されます。
• left、width、right のいずれかが auto でない場合、他の 2 つのプロパティの auto 値は 0 に設定され、残りのマージンは均等に計算されます。この結果、中央揃えになります。
• 3 つのプロパティがいずれも auto でない場合、margin-left と margin-right は再び 0 に設定され、要素の位置を調整するために特定のルールが適用されます。

左と右をゼロに設定する

margin: auto を使用して絶対要素または固定要素を中央に配置するには、左と右も 0 に設定する必要があります。これにより、ブラウザーは強制的に計算を実行します。 margin-left と margin-right を等しく設定すると、水平方向のセンタリングが行われます。

ただし、left または right に他の値を指定した場合、width も設定しない限りセンタリングは行われません。これらのプロパティのいずれかを省略すると、要素が中央に配置されなくなります。

実際の例

次のコードを考えてみましょう:

.box {
  height: 50px;
  border: 1px solid;
  position: relative;
}

.box > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  background-color: red;
  color: #fff;
}

この例では、left: 0 と right: 0 を設定すると、div が常にボックスの左端と右端と同じ高さになります。 margin: auto プロパティは、div をボックス内の水平方向の中央に配置します。

以上が「margin: auto」が要素を絶対的に中央に配置しない、または固定配置されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。