Margin: Auto が要素を常に中央に配置しないのはなぜですか?

Margin:auto は、配置された要素を中央に配置するには不十分です

絶対位置または固定位置の要素を水平方向に中央に配置しようとすると、margin: auto プロパティが使用されます

フロー内要素 (位置のない要素: 絶対または固定) の場合は、幅だけを設定するだけで十分です。マージン: 自動では、要素が中央に配置されるように左右のマージンのバランスが自動的に調整されます。

ただし、配置された要素の場合は状況が異なります。 CSS 仕様によると:

• left、right、width がすべて auto の場合、margin-left と margin-right は 0 に設定され、中央揃えは行われません。
• If left、right、width はすべて自動ではなく、margin-left と margin-right が同じ値に設定され、中央揃えになります。

位置決めされた要素を中央揃えにするには:

1.左、右、幅を設定します

position: absolute;
left: 0;
right: 0;
width: 70px;

2. margin-left と margin-right を auto に設定します (オプション)

position: absolute;
left: 0;
right: 0;
width: 70px;
margin-left: auto;
margin-right: auto;

左右を 0 に設定すると、要素が移動できる左右の境界が基本的に定義されます。 Margin: auto は、これらの境界間のスペースのバランスをとります。

例:

幅 200 ピクセルの親要素と、幅 200 ピクセルの絶対位置の子要素を考えます。 70px:

parent {
  width: 200px;
  position: relative;
}
child {
  position: absolute;
  left: 0;
  right: 0;
  width: 70px;
  margin: auto; /* Optional */
}

margin: auto を使用すると、子要素は親に対して水平方向に中央揃えになります。これは、計算されたマージン (margin-left と margin-right) が等しく、子が利用可能なスペースの中央に事実上配置されるためです。

以上がMargin: Auto が要素を常に中央に配置しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。