Div 내부에 이미지를 수직 및 수평 중앙에 배치하는 방법은 무엇입니까?

큰 Div에서 이미지를 수직 및 수평 중앙에 배치

큰 div에 이미지를 삽입할 때 적절한 정렬을 보장하는 것이 중요할 수 있습니다. 특히 수직 센터링은 어려울 수 있습니다. 가로 및 세로 가운데 맞춤을 효과적으로 달성하는 방법은 다음과 같습니다.

자동 여백을 사용한 절대 위치 지정

자동 여백과 함께 절대 위치 지정을 사용하는 것이 효과적인 방법입니다. 이 기술을 사용하면 포함된 div에 고정 높이가 없는 시나리오에서도 이미지를 div 내에서 가로 및 세로 중앙에 배치할 수 있습니다.

이 솔루션을 구현하려면:

1. 이미지 절대 위치 지정 position:absolute;을 사용합니다.
2. 설정 margin 속성을 ​​auto로 설정; 브라우저가 자동으로 여백을 조정하도록 허용합니다.
3. 상단, 왼쪽, 오른쪽 및 하단 값을 지정합니다. 0으로 설정합니다. 이는 이미지가 상위 이미지의 전체 공간을 차지하도록 지시합니다. div.

다음은 예제 코드 조각입니다.

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

이 기술을 사용하면 이미지가 div 높이에 관계없이 div 내에서 수직 및 수평 중앙에 배치됩니다.

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