왜 `margin-left: auto` 및 `margin-right: auto`는 요소를 `position:absolute`로 중앙에 배치하지 않습니까?

CSS를 사용하여 요소 중앙에 배치: 절대 위치 지정과 상대 위치 지정

CSS를 사용하여 요소를 중앙에 배치하려고 하면 문제가 발생할 수 있습니다. 여기서 margin-left: auto 및 margin-right: auto는 position:absolute에서는 효과가 없는 것 같습니다. 그러나 이러한 여백은 위치: 상대가 적용될 때 작동합니다.

이 차이는 위치: 절대가 일반 문서 흐름에서 요소를 제거하고 제공된 좌표에 따라 배치하는 방식에서 비롯됩니다. 이러한 맥락에서 여백을 자동으로 설정하면 여백을 계산할 "상위" 요소가 없기 때문에 아무런 효과가 없습니다.

반면 position:relative는 페이지의 일반적인 흐름 내에서 요소의 위치를 ​​유지합니다. . 따라서 margin-left: auto 및 margin-right: auto를 사용하면 포함된 요소를 기준으로 요소를 중앙에 배치할 수 있습니다.

절대 위치 지정을 사용하여 요소를 수평으로 중앙에 배치하려면 요소의 너비를 설정하고 위치를 지정할 수 있습니다. left 및 right를 사용하여 상위 컨테이너의 왼쪽 및 오른쪽 가장자리에 배치하고 위쪽 및 아래쪽 위치를 설정하여 요소를 수직으로 가운데에 배치합니다.

위 내용은 왜 `margin-left: auto` 및 `margin-right: auto`는 요소를 `position:absolute`로 중앙에 배치하지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!