CSS를 사용하여 컨테이너 내에서 이미지를 수직 중앙에 배치하려면 어떻게 해야 합니까?

컨테이너 내에서 이미지를 수직 중앙에 배치

프런트 엔드 개발에서 일반적인 과제는 더 큰 컨테이너 내에서 이미지를 수직 중앙에 배치하는 것입니다. text-align: center를 사용하면 수평 중앙 정렬은 쉽게 이루어지지만 수직 정렬은 여전히 ​​어렵습니다.

절대 위치 지정을 사용한 솔루션

신뢰할 수 있는 솔루션은 절대 위치 지정을 활용하는 것입니다. 자동 여백과 함께. 절대 위치 지정을 사용하면 상위 요소를 기준으로 이미지의 위치를 ​​세밀하게 제어할 수 있습니다. 자동 여백 설정(margin:auto 사용)은 이미지를 가로 및 세로 모두 효과적으로 중앙에 배치합니다.

코드 예

다음 CSS 코드는 이 접근 방식을 보여줍니다.

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

결과적으로 이미지는 컨테이너의 높이나 너비에 관계없이 상위 컨테이너의 정중앙에 배치됩니다. 이 솔루션은 이전 브라우저(IE >= 8)와 호환되며 수직 정렬 문제를 효과적으로 해결합니다.

위 내용은 CSS를 사용하여 컨테이너 내에서 이미지를 수직 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!