CSS `margin: auto` 요소를 어떻게 중심에 두나요?

CSS 여백에서 '자동'의 마법

CSS 여백이 요소 주위의 공간을 결정한다는 것은 상식입니다. 그런데 'auto'를 값으로 사용하면 어떨까요?

'Auto'의 역할 이해

margin의 두 번째 매개변수에 'auto'를 적용하면 브라우저는 자체적으로 왼쪽 및 오른쪽 여백을 결정할 책임이 있습니다. 두 여백을 동일하게 설정하면 이를 달성할 수 있습니다.

예: 개체 중심 맞추기

너비가 100px인 상위 컨테이너와 하위 요소가 있는 시나리오를 고려해 보겠습니다. 너비는 50px입니다. 'margin: 0 auto'를 사용하면 브라우저는 남은 공간(50px)을 계산하여 왼쪽과 오른쪽 여백에 균등하게 나눕니다.

이 결과는 다음과 같습니다.

freeSpace = 100 - 50 = 50
equalShare = freeSpace / 2 = 25

margin-left: 25
margin-right: 25

결과적으로 하위 요소는 상위 요소의 중앙에 배치됩니다. 컨테이너.

추가 참고사항

• 'auto'가 작동하려면 상위 요소의 너비를 지정할 필요가 없습니다. 하위 개체의 너비만 필요합니다.
• 여백의 첫 번째 매개변수에 'Auto'를 사용할 수도 있으며, 이는 위쪽 및 아래쪽 여백을 동일하게 설정해야 함을 나타냅니다.

위 내용은 CSS `margin: auto` 요소를 어떻게 중심에 두나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!