CSS에서 음수 여백 값을 사용하여 중앙 위치를 조정하는 방법

이 글에서는 CSS에서 중심 위치를 조정하기 위해 음수 여백 값을 사용하는 방법을 주로 소개합니다. 이 글에서는 이 일반적인 방법의 몇 가지 주목할만한 측면도 언급하고 있습니다.

아마도 가장 일반적으로 사용되는 방법일 것입니다. 센터링 방법. 각 요소의 크기를 알고 있는 경우 음수 여백 값을 너비와 높이의 절반으로 설정한 다음(box-sizing: border-box 스타일을 사용하지 않는 경우 패딩 값도 추가해야 함) 일치시킵니다. top: 50%; left: 50% 스타일은 블록 요소를 중앙에 배치합니다.

이 방법은 예상대로 IE6-7에서 작동할 수 있는 유일한 방법이라는 점에 유의해야 합니다.

.is-Negative {       
        width: 300px;       
        height: 200px;       
        padding: 20px;       
        position: absolute;       
        top: 50%; left: 50%;       
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

장점:

매우 우수한 브라우저 호환성, 심지어 IE6-7도 지원합니다.
코딩이 거의 필요하지 않습니다.

또한 참고:

이는 응답하지 않는 방법이며 백분율 크기를 사용할 수 없습니다. min-/max-의 최대값과 최소값을 설정합니다.
콘텐츠가 컨테이너를 초과할 수 있습니다.
패딩을 위한 공간을 예약하거나 box-sizing: border-box 스타일을 사용해야 합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

DIV를 중앙에 배치하기 위해 position:fixed 속성을 사용하는 방법

CSS 팝업 창을 중앙에 배치하는 방법

CSS 부동 소수점 및 위치 분석

위 내용은 CSS에서 음수 여백 값을 사용하여 중앙 위치를 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!