왜 `margin: auto`는 절대 중심에 위치하지 않거나 위치가 고정된 요소를 고정하지 않습니까?

Margin:auto만으로는 위치 요소를 중앙에 배치할 수 없는 이유

위치를 사용하여 상위 컨테이너 내의 div 요소를 중앙에 배치하려고 할 때: 절대 또는 위치: 고정 속성, margin: auto만 사용하는 것만으로는 충분하지 않을 수 있습니다.

이해하기 CSS 사양

CSS 사양에 따라 위치: 상대 또는 위치: 정적(일반 흐름) 요소의 경우 margin-left 및 margin-right를 모두 자동으로 수평으로 설정하면 해당 요소를 기준으로 요소가 수평으로 가운데에 배치됩니다. 사용된 값이 동일해지기 때문에 포함 블록입니다. 그러나 이는 위치: 절대 또는 위치: 고정 요소에는 적용되지 않습니다.

왼쪽, 너비, 오른쪽 세 개가 모두 자동인 절대 또는 고정 위치 요소의 경우 margin-left에 사용되는 값 및 margin-right는 중앙 정렬을 방지하기 위해 0으로 설정됩니다. 이러한 요소를 중앙에 배치하려면 왼쪽, 오른쪽 또는 너비 값을 정의해야 합니다.

왼쪽, 오른쪽, 너비 설정 효과

왼쪽, 오른쪽, 너비와 너비가 모두 정의되고 여백은 동일한 값을 가져서 중앙에 배치됩니다. 이러한 값 중 하나라도 생략하면 요소가 중앙 정렬에서 벗어나게 됩니다.

다른 사례를 사용한 데모

다음 표는 CSS에 설명된 다양한 사례를 보여줍니다. 사양:

Margin Setting	Centring
margin-left: auto; margin-right: auto	Yes (flow element)
margin-left: auto; margin-right: auto	No (absolute/fixed element)
left: auto; right: auto; width: auto	No (margin set to 0)
left: 0; right: 0; width: auto	No (margin set to 0)
right: auto; left: auto;	No (margin set to 0)
left: auto; right: auto; width: 200px	Yes (equal margins)
left: 0; width: auto	Yes (equal margins)
right: 0; width: auto	Yes (equal margins)

위 내용은 왜 `margin: auto`는 절대 중심에 위치하지 않거나 위치가 고정된 요소를 고정하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!