CSS를 사용하여 div의 이미지를 중앙에 배치하는 방법

CSS에서 div의 이미지를 중앙에 배치하는 방법은 다음과 같습니다. 텍스트 정렬: 이미지와 텍스트의 수직 중앙 정렬에 적합합니다. Flexbox: 이미지의 수평 및 수직 중앙 정렬에 적합합니다. 변환: 고정된 크기의 이미지에 작동합니다. 자동 여백: 이미지의 너비가 알려진 상황에 적합합니다.

CSS에서 div의 이미지를 중앙에 배치하는 방법

방법 1: text-align

<code class="css">div {
  text-align: center;
}

img {
  display: inline-block;
}</code>

이 방법은 이미지를 텍스트와 함께 세로 중앙에 배치하려는 상황에 적합합니다. .

방법 2: flexbox

<code class="css">div {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  max-width: 100%;
}</code>

flexbox는 유연한 레이아웃을 허용합니다. 이 방법은 이미지를 가로 및 세로 중앙에 배치해야 하는 상황에 적합합니다.

방법 3: 변환

<code class="css">div {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</code>

이 방법은 절대 위치 지정 및 변환을 사용하며 고정 크기 이미지에 적합합니다.

방법 4: 여백 auto

<code class="css">div {
  text-align: center;
}

img {
  margin: auto;
}</code>

margin: auto는 이미지를 자동으로 중앙에 배치하지만 이미지 너비를 알고 있는 경우에만 사용할 수 있습니다.

위 내용은 CSS를 사용하여 div의 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!