Div 내에서 이미지를 가로 및 세로 가운데에 배치하는 방법은 무엇입니까?

Div의 중앙과 중앙에 이미지 정렬

웹 디자인에서 요소를 정확하게 정렬하는 것은 세련되고 시각적으로 매력적인 사용자 인터페이스에 매우 중요합니다. 일반적인 과제 중 하나는 div 컨테이너 내의 이미지를 수평 및 수직 중앙에 정렬하는 것입니다.

이 문제를 해결하려면 다음 div 구조를 고려하십시오.

<div>
<p>이미지를 정렬하려면 div의 중앙에서 CSS 속성을 사용할 수 있습니다.</p>
<pre class="brush:php;toolbar:false">body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

margin-left: auto;를 설정하여 및 margin-right: auto;를 사용하면 이미지가 div 내 중앙에 오도록 이미지의 수평 여백을 자동으로 조정하도록 브라우저에 지시합니다. 또한 설정 표시: 블록; 이미지가 자체 줄을 차지하여 세로 중앙에 위치할 수 있습니다.

이러한 CSS 속성을 사용하면 화면 크기에 관계없이 이미지가 div 컨테이너의 중앙과 중앙에 정확하게 정렬됩니다. 또는 div.