여백: 자동이 항상 중앙에 배치된 요소가 아닌 이유는 무엇입니까?

Margin:auto 위치 요소를 중앙에 배치하기에 충분하지 않음

절대 또는 고정 위치 요소를 수평으로 중앙에 배치하려고 하면 여백: 자동 속성 만으로는 충분하지 않을 수 있습니다.

유입 요소(위치가 없는 요소: 절대 또는 고정)의 경우 너비만 설정하면 충분합니다. 여백: 자동은 요소를 중앙에 배치하기 위해 자동으로 왼쪽과 오른쪽 여백의 균형을 맞춥니다.

그러나 위치가 지정된 요소의 경우 상황이 다릅니다. CSS 사양에 따라:

• 왼쪽, 오른쪽 및 너비가 모두 자동인 경우 margin-left 및 margin-right가 0으로 설정되어 가운데 정렬이 되지 않습니다.
• 왼쪽, 오른쪽 및 너비가 모두 자동이 아니며 margin-left 및 margin-right가 동일한 값으로 설정되어 중앙에 배치됩니다.

위치가 지정된 요소를 중앙에 맞추려면:

1. 왼쪽, 오른쪽, 너비 설정

position: absolute;
left: 0;
right: 0;
width: 70px;

2. margin-left 및 margin-right를 자동으로 설정(선택 사항)

position: absolute;
left: 0;
right: 0;
width: 70px;
margin-left: auto;
margin-right: auto;

왼쪽 및 오른쪽을 0으로 설정하면 기본적으로 요소가 이동할 수 있는 왼쪽 및 오른쪽 경계가 정의됩니다. 여백: 자동은 이러한 경계 사이의 공간 균형을 맞춥니다.

예:

너비가 200px인 상위 요소와 너비가 70px:

parent {
  width: 200px;
  position: relative;
}
child {
  position: absolute;
  left: 0;
  right: 0;
  width: 70px;
  margin: auto; /* Optional */
}

margin: auto를 사용하면 하위 요소가 상위 요소를 기준으로 수평 중앙에 배치됩니다. 이는 계산된 여백(왼쪽 여백과 오른쪽 여백)이 동일하여 사용 가능한 공간의 중앙에 효과적으로 아이를 배치하기 때문입니다.

위 내용은 여백: 자동이 항상 중앙에 배치된 요소가 아닌 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!