왜 'margin: auto'가 중앙에 위치하지 않거나 위치가 고정된 요소가 고정되지 않습니까?

위치 요소 중앙에 배치: 'margin: auto'를 넘어

CSS에서 margin: auto 속성을 사용하여 요소를 중앙에 배치하는 것은 다음과 같은 경우 까다로울 수 있습니다. 절대적으로 위치하거나 고정된 요소를 처리합니다. 이 동작을 이해하려면 CSS 사양을 자세히 조사해야 합니다.

In-Flow 요소 센터링

In-flow 요소의 경우(절대 또는 고정 위치 지정 없음), margin-left와 margin-right를 모두 자동으로 설정하면 포함 블록을 기준으로 수평 중심이 맞춰집니다. 이는 CSS 사양에 따라 두 여백이 모두 자동으로 설정되면 동일해야 하며 결과적으로 요소가 중앙에 배치되도록 규정하고 있기 때문에 가능합니다.

절대 요소 및 고정 요소 중심

그러나 절대요소나 고정요소의 경우에는 상황이 다릅니다. CSS 사양에는 다음과 같이 명시되어 있습니다.

• 왼쪽, 너비, 오른쪽 세 개가 모두 자동이면 margin-left 및 margin-right 값이 0으로 설정되어 자동 가운데 맞춤을 방지합니다.
• 왼쪽, 너비 또는 오른쪽이 자동이 아닌 경우 다른 두 속성의 자동 값은 0으로 설정되고 나머지 여백은 동일하게 계산됩니다. 결과는 중앙 정렬입니다.
• 세 가지 속성 중 자동이 아닌 경우 margin-left 및 margin-right는 다시 0으로 설정되고 요소의 위치를 ​​조정하기 위해 특정 규칙이 적용됩니다.

왼쪽 및 오른쪽을 0으로 설정

margin:auto를 사용하여 절대 또는 고정 요소를 중앙에 배치하려면 다음을 수행해야 합니다. 또한 왼쪽과 오른쪽을 모두 0으로 설정합니다. 이렇게 하면 브라우저가 왼쪽 여백과 오른쪽 여백을 동일하게 계산하여 수평 중앙 정렬이 됩니다.

그러나 왼쪽 또는 오른쪽에 다른 값을 지정하면 중앙 정렬이 수행됩니다. 너비도 설정하지 않으면 발생하지 않습니다. 이러한 속성 중 하나를 생략하면 중심이 아닌 요소가 생성됩니다.

실제 예시

다음 코드를 고려하세요.

.box {
  height: 50px;
  border: 1px solid;
  position: relative;
}

.box > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  background-color: red;
  color: #fff;
}

이 예에서 left: 0 및 right: 0을 설정하면 div가 항상 상자의 왼쪽 및 오른쪽 가장자리와 같은 높이가 됩니다. margin: auto 속성은 div를 상자 내에서 수평으로 중앙에 배치합니다.

위 내용은 왜 'margin: auto'가 중앙에 위치하지 않거나 위치가 고정된 요소가 고정되지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!