HTML에서 \'margin: auto\' 요소를 수직으로 중앙에 배치하지 않는 이유는 무엇입니까?

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

문제:

HTML에서 "margin: auto" 적용 "를 요소에 추가하면 일반적으로 컨테이너 내에서 수평으로 중앙에 배치됩니다. 그런데 왜 수직으로 같은 방식으로 동작하지 않나요?

설명:

CSS 사양(CSS2.1의 섹션 10.6.2)에 따르면, 블록- 레벨 요소(예: div)는 자동 중심 맞춤 없이 위에서 아래로 수직으로 배치됩니다. 이는 특정 조건(예: 상위 요소의 테두리)에서 수직 여백이 축소될 수 있기 때문입니다.

자동 높이가 있는 컨테이너 내에 자동 여백이 있는 블록 수준 요소가 하나만 존재하는 시나리오에서는 해당 요소의 상단 어쨌든 아래쪽 여백은 0이 됩니다. 그러나 여러 블록 수준 요소 또는 흐름 외부 상자(예: 여유 공간)가 있는 경우 자동 여백의 동작이 모호해지며 수동 제어가 필요합니다.

인라인 요소 및 플로트:

인라인 요소(원자적 인라인 포함) 및 부동 소수점의 경우 자동 왼쪽 및 오른쪽 여백도 0으로 설정됩니다. 이는 인라인 수준 상자가 라인 상자를 따라 배치되고 부동 소수점은 고유한 레이아웃 규칙을 따르기 때문입니다.

절대 위치 상자:

자동 여백은 절대 위치에 대해 다르게 동작합니다. 상자. 동일한 위치 지정 컨텍스트에서 다른 요소와 독립적이므로 자동 상단 및 하단 여백을 사용하여 수직으로 가운데에 배치할 수 있습니다.

Flexbox:

Flexbox에서 자동 여백 또 다시 다르게 행동해 보세요. Flex 항목은 존재 여부를 포함하여 서로를 인식합니다. 이를 통해 수직 중앙 정렬을 포함한 여백 동작을 보다 정확하게 제어할 수 있습니다.

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