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

웹디자인에서 사진은 빼놓을 수 없는 요소입니다. 이미지의 크기가 상위 컨테이너보다 작거나 상위 컨테이너의 너비와 높이가 확실하지 않은 경우 이미지를 중앙에 배치하는 방법이 문제가 됩니다. CSS의 flex 레이아웃과 위치 속성을 통해 이 문제를 해결할 수 있습니다.

1. Flex 레이아웃 사용

Flex 레이아웃은 CSS3에서 도입된 새로운 레이아웃 방법으로 컨테이너의 레이아웃을 유연하게 제어할 수 있습니다. 하위 요소를 상위 컨테이너의 중앙에 배치하는 것은 매우 쉽습니다.

1. justify-content 및 align-items 속성을 사용하세요.

Flex 레이아웃에서 justify-content 및 align-items 속성을 사용하여 이미지의 가로 및 세로 중심을 맞출 수 있습니다. justify-content 속성은 하위 요소의 기본 축 방향 레이아웃을 제어할 수 있으며, align-items 속성은 교차 축 방향의 하위 요소 레이아웃을 제어할 수 있습니다.

먼저 이미지의 상위 컨테이너를 display:flex로 설정하고 align-items 및 justify-content를 중앙으로 설정해야 합니다.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

이렇게 하면 이미지가 가로와 세로 중앙에 위치하게 됩니다.

2. flex-direction 및 align-self 속성을 사용하세요

플렉스 레이아웃에서 flex-direction 및 align-self 속성을 사용하여 이미지를 중앙에 배치할 수도 있습니다. flex-direction 속성은 주축의 방향을 변경할 수 있으며, align-self 속성은 교차축 방향에서 하위 요소의 레이아웃을 제어할 수 있습니다.

이미지의 상위 컨테이너를 display:flex로 설정하고 flex-direction을 열로 설정합니다.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  display: flex;
  flex-direction: column;
}

다음으로 이미지의 수직 중앙 정렬을 달성하려면 이미지의 align-self 속성을 중앙으로 설정해야 합니다.

img {
  align-self: center;
}

2. 위치 속성을 사용하세요

플렉스 레이아웃을 사용하는 것 외에도 위치 속성을 사용하여 이미지를 중앙에 배치할 수도 있습니다. position 속성을 사용하는 방법은 약간 다릅니다.

1. 절대 위치 지정 사용

이미지를 절대 위치로 설정한 다음 왼쪽 및 위쪽 속성을 사용하여 상위 컨테이너에서 이미지의 위치를 ​​제어할 수 있습니다. 이미지가 상위 컨테이너를 기준으로 배치될 수 있도록 상위 컨테이너의 위치를 ​​상대 위치로 설정합니다.

<div class="parent">
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

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

이렇게 하면 이미지가 가로와 세로 중앙에 위치하게 됩니다.

2. 음수 여백 사용

음수 여백을 사용하여 이미지를 중앙에 배치할 수도 있습니다. 이 방법은 상위 컨테이너에 추가 요소를 추가하여 구현됩니다. 상위 컨테이너를 position:relative로 설정하고, 빈 요소를 추가하고, 빈 요소에 이미지를 배치합니다.

<div class="parent">
  <div class="placeholder"></div>
  <img src="your-image.jpg">
</div>

.parent {
  position: relative;
}

.placeholder {
  height: 100%;
  margin-right: -100%;
}

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

이렇게 하면 사진을 가로 및 세로 중앙에 맞출 수도 있습니다.

핵심 요약

이미지를 중앙에 배치할 때 플렉스 레이아웃과 위치 속성을 사용하여 이를 구현할 수 있습니다. 플렉스 레이아웃을 사용할 때 justify-content 및 align-items 속성은 물론 flex-direction 및 align-self 속성도 사용할 수 있습니다. 위치 속성을 사용할 때 이미지를 절대 위치로 설정하거나 음수 여백을 사용할 수 있습니다.

일반적으로 플렉스 레이아웃을 사용하는 것이 더 유연하고 간단하지만 CSS3를 사용해야 하며 위치 속성을 사용하는 것이 이전 브라우저와 더 잘 호환됩니다. 실제 적용에서는 상황에 따라 이미지를 중앙에 배치하는 데 사용할 방법을 선택할 수 있습니다.

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