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

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

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

CSS 코드클립보드에 콘텐츠 복사

.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도 지원합니다.
적은 양의 코딩이 필요합니다

또한 참고:

비응답 방식은 백분율 크기를 사용할 수 없으며 최소/최대-최대 및 최소값을 설정할 수 없습니다.
콘텐츠가 컨테이너를 초과할 수 있습니다.
패딩 또는 상자 크기 조정을 위해 공간을 예약해야 합니다. 테두리 상자 스타일을 사용해야 합니다.

CSS에서 음수 여백 값을 사용하여 중앙 위치를 조정하는 방법에 대한 자세한 내용은 PHP 중국어 웹사이트를 참고하세요!