CSS / 이미지 가운데 정렬하는 방법

CSS

작성일 2026-10-27 최근 수정일 2026-10-27

이미지를 가로 가운데에 놓으려면 인라인 이미지의 부모에 text-align: center를 주거나, 이미지를 블록으로 바꾸고 좌우 여백을 auto로 지정합니다. 가로와 세로를 동시에 가운데에 놓으려면 이미지의 부모를 Grid로 만들고 place-items: center를 적용하면 됩니다. 어느 방법이든 이미지보다 넓은 정렬 공간이 있어야 가운데로 이동한 차이가 보입니다.

인라인 이미지는 부모의 text-align으로 정렬

.photo-area {
  text-align: center;
}
.photo-area img {
  max-width: 100%;
  height: auto;
}

기본 img는 인라인 수준 요소이므로 부모의 text-align이 같은 줄 안에서 이미지를 정렬합니다. 이 규칙을 img 자신에게만 적용하면 이미지 상자 자체를 가운데로 옮기는 효과는 없습니다. 부모 안에 함께 있는 글자나 다른 인라인 요소도 정렬 대상이라는 점을 고려하세요.

기존 스타일에서 img를 display: block으로 바꾸었다면 text-align만으로 가운데에 놓이지 않습니다. 아래의 블록 이미지 방식으로 전환하거나 해당 display 규칙을 확인해야 합니다. 인라인 이미지 아래의 작은 기준선 여백은 vertical-align: middle 등으로 조절할 수 있지만, 이 속성이 부모 상자 높이의 한가운데에 배치한다는 뜻은 아닙니다.

블록 이미지는 좌우 자동 여백으로 정렬

.photo {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

display: block으로 만든 이미지에 양쪽 인라인 방향 여백을 auto로 지정하면 남는 공간을 양쪽에 나눕니다. 가로쓰기에서는 margin-left: auto와 margin-right: auto를 지정하는 방식과 같습니다. 주변 문구의 정렬은 바꾸지 않고 이미지 자체만 정렬할 때 유용합니다.

위 예제는 너비 240px을 기본으로 하되 좁은 부모를 넘지 않게 제한합니다. width: 100%로 부모 폭을 이미 전부 차지하면 남는 좌우 공간이 없으므로 가운데 정렬을 추가해도 위치가 달라 보이지 않습니다. 일반 블록 흐름에서 위아래 margin을 auto로 설정하는 것만으로 세로 가운데가 되지는 않습니다.

전체 예제: 세 가지 방법을 같은 그림으로 비교

먼저 아래 SVG 코드를 일반 텍스트 파일 sample.svg로 저장합니다. 다음 HTML 코드는 같은 폴더에 image-center.html로 저장한 뒤 브라우저에서 엽니다. 외부 라이브러리는 필요하지 않습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">
  <rect width="640" height="360" fill="#dff2f3"/>
  <circle cx="480" cy="90" r="42" fill="#f3ba51"/>
  <path d="M0 360 210 100 410 360Z" fill="#298e96"/>
  <path d="M220 360 440 170 640 360Z" fill="#17618a"/>
</svg>

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>이미지 가운데 정렬 비교</title>
  <style>
    body { margin: 20px; font: 16px/1.6 "Noto Sans KR", sans-serif; color: #203348; }
* { box-sizing: border-box; }
    h1 { font-size: 24px; }
    h2 { margin: 16px 0 8px; font-size: 18px; }
    .frame { max-width: 500px; border: 1px solid #7896ac;
      padding: 12px; background: #f3f6fa; }
    .frame img { width: 160px; max-width: 100%; height: auto; }
    .text-center { text-align: center; }
    .text-center img { vertical-align: middle; }
    .margin-center img { display: block; margin-inline: auto; }
    .both-center { display: grid; place-items: center; min-height: 160px; }
    .both-center img { display: block; }
  </style>
</head>
<body>
<h1>이미지 가운데 정렬 비교</h1>
<h2>부모의 text-align</h2>
<div class="frame text-center">
  <img src="sample.svg" width="640" height="360" alt="태양과 두 산이 있는 연습용 그림">
</div>
<h2>블록 이미지의 자동 여백</h2>
<div class="frame margin-center">
  <img src="sample.svg" width="640" height="360" alt="태양과 두 산이 있는 연습용 그림">
</div>
<h2>Grid로 가로·세로 가운데</h2>
<div class="frame both-center">
  <img src="sample.svg" width="640" height="360" alt="태양과 두 산이 있는 연습용 그림">
</div>
</body>
</html>

첫 두 그림은 가로 가운데, 마지막 그림은 높이 160px 이상인 부모 안의 가로·세로 가운데에 놓입니다. 세로 가운데 차이는 이미지 높이보다 부모 공간이 클 때 확인할 수 있습니다. 이미지 너비와 높이 속성은 원본 비율을 알려 주고, CSS의 width: 160px와 height: auto가 화면에 그릴 크기를 정합니다.

이미지의 width만 200px로 바꾸어도 중심이 유지되는지 확인한 뒤 160px로 복원하세요. 마지막 부모의 min-height를 220px로 바꾸면 부모가 높아져도 이미지가 세로 가운데에 남아야 합니다. 확인 후 160px로 되돌립니다. Grid에서 place-items는 두 방향 정렬을 지정하지만 Flex에서는 같은 한 줄 선언으로 두 축을 모두 정렬할 수 없으므로 레이아웃 방식을 함께 확인해야 합니다.

정렬이 안 될 때 확인할 항목

개발자 도구에서 이미지가 로드되었는지, 적용된 display·width·margin, 부모의 실제 크기를 확인합니다. float나 position: absolute 같은 기존 규칙은 일반 흐름의 정렬 조건을 바꾸므로 필요한지 먼저 판단하세요. 테마가 더 구체적인 선택자로 여백을 덮고 있다면 관련 규칙을 범위에 맞게 조정합니다.

가운데 정렬과 이미지 자르기는 별개입니다. 이미지 전체를 보이게 하려면 비율을 유지하고, 고정된 사진 틀을 가득 채우면서 잘라내려면 img의 크기와 object-fit: cover를 따로 설계해야 합니다. 또한 이미지 위에 텍스트를 정가운데에 놓는 방법은 이미지 자체의 정렬과 다른 작업입니다.

자동 여백의 기준은 MDN margin 문서, 인라인 정렬의 범위는 vertical-align 문서, Grid의 두 방향 정렬은 place-items 문서를 참고할 수 있습니다.

CSS