CSS를 사용하여 Div 내에서 대형 이미지를 중앙에 배치하는 방법은 무엇입니까?

CSS를 사용하여 Div에서 큰 이미지를 중앙에 배치

이미지 컨테이너 너비가 다양한 유동 레이아웃을 처리할 때 div 내에서 큰 이미지를 중앙에 배치하는 것은 다음과 같습니다. 도전. margin-left 및 margin-right를 자동으로 설정하는 것과 같은 기존 CSS 방법은 주변 div보다 작은 이미지에만 작동합니다.

이 문제를 해결하려면 다음 CSS 솔루션을 고려하세요.

.parent {
    position: relative;
    overflow: hidden;
    // Optional height and width settings based on the desired design
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

이 접근 방식을 사용하면 크기에 관계없이 모든 이미지가 상위 div 내에서 가로 및 세로 중앙에 배치됩니다. 음수 위쪽, 아래쪽, 왼쪽 및 오른쪽 값은 기본적으로 이미지가 상위 요소 내의 전체 공간을 채우도록 강제하고 여백: 자동 규칙은 해당 공간 내에서 이미지를 중앙에 배치합니다.

overflow:hidden을 사용하는 상위 div의 경우 큰 이미지가 양쪽 가장자리에서 고르게 잘려 원하는 중심 효과가 생성됩니다.

위 내용은 CSS를 사용하여 Div 내에서 대형 이미지를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!