`margin: auto`가 절대 위치 요소를 중앙에 배치하지 않는 이유는 무엇입니까?

자동 여백을 사용하여 절대 위치에 있는 요소를 중앙에 맞추지 못했습니다.

자동 여백을 사용하여 페이지에 절대 위치에 있는 요소를 중앙에 맞추려고 하면 예상되는 오류가 발생합니다. 동작이 발생하지 않을 수 있습니다. 특히, margin-left 및 margin-right를 모두 자동으로 설정하면 이 기술이 상대적으로 배치된 요소에 작동하더라도 요소를 중앙에 배치하지 못합니다.

절대적으로 배치된 요소가 일반 흐름에서 제거되기 때문에 이러한 불일치가 발생합니다. 문서의 레이아웃에서. 분리된 위치에서는 요소를 컨테이너에 정렬하는 여백의 자동 동작이 더 이상 적용되지 않습니다.

해결책

절대 위치 지정을 사용하여 요소를 올바르게 중앙에 배치하려면 대체 접근 방식을 채택해야 합니다. 다음은 몇 가지 옵션입니다.

• 고정 너비 및 가운데 맞춤: 고정 너비 설정 및 왼쪽 적용: 50%; 변환: 변환(-50%, 0); 요소를 수평으로 중앙에 배치합니다.
• 상위 요소 포함: 요소를 상위 요소 내부에 배치하고 text-align: center를 사용하여 중앙에 배치합니다.
• Flexbox: Flexbox 레이아웃을 사용하여 컨테이너 내에서 요소를 가로로 정렬합니다.

위 내용은 `margin: auto`가 절대 위치 요소를 중앙에 배치하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!