\'여백: 자동\' 요소가 수직으로 가운데에 배치되지 않는 이유는 무엇입니까?

"Margin: Auto"를 사용하여 요소를 수직으로 중앙에 배치

"margin: auto"는 효과적으로 요소를 수평으로 중앙에 배치하지만 수직 정렬 기능은 다음과 같을 수 있습니다. 제한된. 이는 블록 상자가 수직으로 쌓이는 방식과 여백이 무너질 가능성이 있기 때문입니다.

CSS2.1 섹션 10.6.2에 따르면 블록 상자는 일반적인 흐름으로 위에서 아래로 쌓입니다. 특정 상황에서는 수직 여백이 축소되어 0이 될 수 있습니다. 포함 블록에 자동 높이가 있고 블록 상자가 하나만 있는 경우 상단 및 하단 여백은 본질적으로 0입니다.

동일한 흐름에 있는 여러 블록 상자 또는 유입 흐름에 영향을 미치는 흐름 외부 상자의 경우 레이아웃, 자동 여백 해결이 더욱 복잡해집니다. 이는 라인 상자와의 간섭을 피하기 위해 자동 왼쪽 및 오른쪽 여백이 0으로 설정되는 인라인 요소 및 부동 소수점까지 확장됩니다.

반대로, 절대 위치 지정 상자는 동일한 위치 지정 컨텍스트에서 다른 상자를 인식하지 못합니다. 따라서 자동 위쪽 및 아래쪽 여백은 포함 블록만을 기준으로 계산할 수 있습니다.

Flexbox는 Flex 형식 지정 컨텍스트 내에서 서로를 완전히 인식하는 Flex 항목에 대한 고유한 솔루션을 제공합니다. Flexbox의 세로 여백은 고유한 규칙을 따르므로 요소 정렬을 보다 정확하게 제어할 수 있습니다.

위 내용은 \'여백: 자동\' 요소가 수직으로 가운데에 배치되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!