Div 내에서 이미지를 완벽하게 중앙에 배치하는 방법은 무엇입니까?

컨테이너 Div 내에서 완벽한 이미지 중심 맞추기

웹 디자인의 일반적인 과제 중 하나는 더 큰 컨테이너 div 내에서 이미지의 중심을 맞추는 것입니다. 정확한 수직 및 수평 정렬 솔루션으로 이 문제를 해결해 보겠습니다.

질문:

200 x 200픽셀 div 내에서 50 x 50픽셀 이미지를 어떻게 중앙에 배치할 수 있나요? , 수평 및 수직 정렬을 모두 보장합니까?

답변:

이 정렬을 달성하기 위해 다음 기술을 사용합니다.

절대 위치 지정을 사용한 수직 및 수평 중심 지정

절대 위치 지정 자동 여백과 결합하면 요소를 가로와 세로 모두 중앙에 배치할 수 있습니다. 상위 요소의 상대적 위치를 기반으로 요소의 위치를 ​​기준으로 하여 정확한 정렬을 보장합니다.

CSS 코드:

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

이 코드는 이미지가 요소의 중앙에 위치하도록 보장합니다. 크기나 브라우저 호환성에 관계없이 컨테이너 div.

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