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

CSS에서 이미지를 수직으로 중앙에 배치하는 방법은 여러 가지가 있습니다. Flexbox를 사용하여 상위 컨테이너를 Flexbox로 설정하고 align-items: center를 통해 이미지를 중앙에 배치합니다. 변환을 사용하여 이미지의translateY 속성을 -50%로 설정하고 위로 50% 이동하고 중앙에 배치합니다. 이미지의 위쪽 및 아래쪽 여백을 자동으로 설정하면 이미지가 상위 요소를 기준으로 자동으로 중앙에 배치됩니다.

CSS에서 이미지를 세로로 가운데에 배치합니다.

CSS에서 이미지를 세로로 가운데에 배치하는 방법에는 여러 가지가 있습니다. 가장 일반적으로 사용되는 방법은 다음과 같습니다.

1. flexbox

flexbox를 사용하면 컨테이너를 flexbox로 설정하고 이미지를 직접 하위 요소로 가질 수 있습니다. 그런 다음 align-items: center; 속성을 ​​사용하여 하위 요소(이미지 포함)를 수직으로 가운데에 배치할 수 있습니다. align-items: center; 属性将子元素（包括图像）垂直居中。

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

.image {
  max-width: 100%;
  height: auto;
}</code>

2. transform

transform 允许应用转换到元素，包括垂直平移。通过将图像的 transform 属性设置为 translateY(-50%)，可以将其向上移动 50%，从而使其垂直居中。

<code class="css">.image {
  max-width: 100%;
  height: auto;
  transform: translateY(-50%);
}</code>

3. margin

在某些情况下，可以使用 margin 属性来垂直居中图像。为此，需要设置图像的顶部和底部 margin 为 auto

<code class="css">.image {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}</code>

2.transform

transform을 사용하면 수직 이동을 포함하여 요소에 변형을 적용할 수 있습니다. 이미지의 transform 속성을 ​​translateY(-50%)로 설정하면 이미지를 위로 50% 이동하고 세로 중앙에 배치할 수 있습니다.

rrreee

3. margin
• 경우에 따라 여백 속성을 사용하여 이미지를 세로 중앙에 배치할 수 있습니다. 이렇게 하려면 이미지의 위쪽 및 아래쪽 여백을 auto로 설정하세요.
rrreee
• 가장 좋은 방법을 선택하세요

🎜🎜상황에 가장 적합한 방법을 선택하는 것은 특정 레이아웃과 요구 사항에 따라 다릅니다. 다음은 몇 가지 지침입니다. 🎜🎜🎜이미지가 Flexbox 컨테이너에 있는 경우 Flexbox를 사용하는 것이 쉽고 효과적인 방법입니다. 🎜🎜 이미지가 Flexbox 컨테이너 내부에 있지 않고 추가 변환을 적용하려는 경우 변환은 좋은 선택입니다. 🎜🎜이미지의 너비가 상위 요소에 비해 고정된 경우 여백을 쉽게 선택할 수 있습니다. 🎜🎜

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