CSS에서 이미지를 위아래 중앙에 표시하는 방법

CSS를 사용하여 이미지를 위아래로 중앙에 배치하는 방법: flexbox를 사용하고, 상위 컨테이너의 flex-direction을 열로 설정하고, justify-content 및 align-items를 중앙으로 설정합니다. 절대 위치 지정을 사용하고 이미지 위치를 절대 위치로 설정하고 위쪽과 왼쪽을 50%로 설정하고 오프셋에 변환 속성을 사용합니다. 그리드 레이아웃을 사용하려면 상위 컨테이너의 표시를 그리드로 설정하고 항목을 중앙에 배치하세요. object-fit 속성을 사용하여 이미지를 중앙에 배치합니다

CSS를 사용하여 이미지를 위아래로 중앙에 배치하는 방법

CSS에서는 다음 방법을 사용하여 이미지를 위아래로 중앙에 배치할 수 있습니다.

방법 1: flexbox 사용

<code class="css">.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  height: 100px;
}</code>

방법 2: 절대 위치 사용

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

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

방법 3: 그리드 레이아웃 사용

<code class="css">.container {
  display: grid;
  place-items: center;
}

img {
  height: 100px;
}</code>

방법 4: 객체 맞춤 속성 사용

<code class="css">img {
  object-fit: contain;
}</code>

방법 5 : 사용 padding

<code class="css">.container {
  padding: 20px 0;
}

img {
  height: 100px;
}</code>

방법 선택 제안:

• 이미지 주변에 다른 요소가 필요한 경우 Flexbox 또는 그리드 레이아웃을 사용하세요.
• 이미지 크기가 고정된 경우 절대 위치 지정 또는 개체 맞춤 속성을 사용하세요.
• 이미지 크기가 고정되어 있지 않은 경우 Flexbox 또는 그리드 레이아웃을 사용하는 것이 좋습니다.

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