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

큰 Div 내에서 이미지 중앙에 배치(수직 및 수평)

웹 디자인의 일반적인 요구 사항은 더 큰 Div 내에서 이미지를 중앙에 배치하는 것입니다. div. 텍스트 정렬을 사용하여 수평 중앙 정렬을 수행할 수 있지만, 특히 브라우저 간 호환성에서 수직 정렬이 더 어려울 수 있습니다.

해결책:

이미지를 수평으로 중앙에 맞추려면 더 큰 div 내에서 수직으로 절대 위치 지정과 자동 여백의 조합을 활용할 수 있습니다. 절대 위치 지정을 사용하면 상위 요소를 기준으로 이미지의 위치를 ​​지정할 수 있으며, 자동 여백을 사용하면 요소가 가로 및 세로 모두 중앙에 배치됩니다.

이 솔루션을 구현하는 CSS 코드는 다음과 같습니다.

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

이 코드는 이미지의 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백을 자동으로 설정하여 더 큰 div 내에 절대적으로 이미지를 배치합니다. 이렇게 하면 이미지가 div 내에서 수직 및 수평 중앙에 위치하게 됩니다.

참고:

이 솔루션은 자동을 지원하는 최신 브라우저(IE >= 8)에서 작동합니다. 여유. 이전 브라우저의 경우 원하는 효과를 얻으려면 Flexbox 또는 CSS 그리드와 같은 대체 솔루션이 필요할 수 있습니다.

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