절대 위치 여백 자동 문제 이해

"margin-left: auto" 및 " margin-right: auto"를 입력하면 여백이 아무런 효과가 없는 것처럼 보일 수 있습니다. 이 동작은 여백이 예상대로 작동하는 "위치: 상대"와 다릅니다. 이러한 불일치를 이해하기 위해 기본 메커니즘을 더 자세히 살펴보겠습니다.

요소가 절대 위치에 있으면 문서의 일반적인 흐름에서 제거됩니다. 즉, 더 이상 이웃 요소와 상호 작용하지 않으며 크기는 명시적인 크기나 컨테이너 크기에 의해서만 결정됩니다. 결과적으로 요소의 너비가 명시적으로 설정되지 않은 경우 브라우저에서 계산된 값은 'auto'이며, 대부분의 경우 0입니다.

이 시나리오에서는 "margin-left: auto"를 적용하고 "margin-right: auto"는 왼쪽 및 오른쪽 여백을 요소 너비의 절반으로 설정하여 요소 주위에 공간을 만들려고 시도합니다. 그러나 요소의 계산된 너비가 0이므로 계산된 여백 값도 0이 됩니다. 이로 인해 여백이 아무런 영향을 미치지 않는 것처럼 보입니다.

반대로 "position:relative"를 사용하는 경우 요소는 그대로 유지됩니다. 문서의 정상적인 흐름에서. 크기는 내용과 흐름 내에서 차지하는 공간에 따라 결정됩니다. "margin-left: auto" 및 "margin-right: auto"가 적용될 때 여백은 요소의 실제 너비를 기준으로 계산되며, 이 경우에는 0이 아닙니다. 따라서 여백이 올바르게 적용되어 요소가 포함된 요소 내에서 중앙에 배치됩니다.

절대적으로 위치된 요소를 중앙에 배치하려면 해당 요소의 너비와 높이를 지정한 다음 "위치: 절대; 왼쪽: 50 %; 변환: 변환(-50%, -50%);" 컨테이너 내에서 중앙에 배치합니다. 이 방법은 여백이 'auto'로 설정된 경우에도 원하는 위치에 요소를 정확하게 배치합니다.