CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS

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

이미지 위에 텍스트를 정가운데 놓으려면 이미지의 부모에 position: relative, 텍스트에 absolute와 top: 50%; left: 50%를 지정한 뒤 transform: translate(-50%, -50%)로 텍스트 자신의 절반 크기만큼 되돌립니다. 이미지 크기가 바뀌어도 같은 기준으로 가로·세로 중앙을 맞출 수 있습니다.

연습용 이미지와 파일 준비하기

아래 그림 코드를 sample.svg로 저장합니다. 별도 사진 파일 없이 정렬을 재현하기 위한 간단한 풍경이며 기본 비율은 16:9입니다. 실제 프로젝트에서는 자신의 이미지 파일로 바꾸고 alt도 이미지 내용과 역할에 맞게 수정하세요.

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">
  <rect width="640" height="360" fill="#a8d6eb" />
  <circle cx="490" cy="85" r="48" fill="#f6bd4f" />
  <path d="M0 360 L210 110 L420 360 Z" fill="#168b85" />
  <path d="M250 360 L460 160 L640 360 Z" fill="#215d8a" />
</svg>

전체 예제: absolute와 translate 조합하기

다음 코드를 text-on-image.html로 저장하고 sample.svg와 같은 폴더에 둔 뒤 브라우저에서 엽니다. 외부 라이브러리나 JavaScript는 필요하지 않습니다. 이미지가 표시되지 않으면 두 파일의 경로와 확장자를 먼저 확인합니다.

<!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; }
    .hero { position: relative; max-width: 720px; margin: 0; }
    .hero > img { display: block; width: 100%; height: auto; }
    .caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: calc(100% - 32px); max-width: 520px; margin: 0; padding: 16px;
      background: rgb(0 0 0 / 0.6); color: white; text-align: center; }
    .caption h2 { margin: 0; font-size: clamp(18px, 3vw, 28px); line-height: 1.4; }
    .caption p { margin: 8px 0 0; }
  </style>
</head>
<body>
<h1>이미지 위의 가운데 문구</h1>
<figure class="hero">
  <img src="sample.svg" width="640" height="360" alt="노란 해와 초록·파란 산을 그린 연습용 풍경">
  <figcaption class="caption">
    <h2>이미지의 정가운데</h2>
    <p>크기가 달라져도 가운데를 유지합니다.</p>
  </figcaption>
</figure>
</body>
</html>

이미지는 부모 너비를 채우면서 비율을 유지하고, 어두운 반투명 상자 안의 문구가 이미지의 가로·세로 중앙에 놓입니다. 이미지 파일과 텍스트는 별도의 HTML 요소이며 이미지 안에 글자를 합성해 저장한 것이 아닙니다.

50%만으로 부족한 이유와 Grid 대안

top과 left의 50%는 부모를 기준으로 텍스트 상자의 왼쪽 위 모서리를 가운데에 놓습니다. 이 상태에서는 상자의 중심이 오른쪽 아래로 밀립니다. translate의 -50%는 텍스트 상자 자신의 크기를 기준으로 이동하므로 그 차이를 상쇄합니다. 같은 백분율이라도 두 설정의 기준이 다릅니다.

예제의 transform 선언만 잠시 제거해 상자가 오른쪽 아래로 밀리는지 확인한 뒤 복원하세요. 텍스트가 길어져 상자 높이가 달라져도 translate 방식은 새 크기를 기준으로 계산합니다. 다만 텍스트가 이미지보다 커지는 상황까지 내용이 자동으로 잘 맞게 정리되는 것은 아닙니다.

Grid를 사용하면 이미지와 문구를 같은 셀에 겹친 뒤 중앙 정렬할 수도 있습니다. 아래 규칙을 예제 style의 맨 끝에 추가해 비교합니다. 기존 글자·배경·너비 설정을 유지하면서 absolute 좌표와 transform을 해제하는 코드입니다.

.hero { display: grid; }
.hero > img, .hero > .caption { grid-area: 1 / 1; }
.hero > .caption {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  place-self: center;
}

두 방식의 중앙 위치는 같아야 합니다. 비교를 마치면 추가한 Grid 규칙을 제거해 원래 예제로 돌아갑니다. 이미지와 글자를 겹치는 단순한 구성에서는 Grid가 편리하고, 기존 absolute 배치를 보완하거나 여러 위치에 배치할 때는 좌표와 translate를 활용할 수 있습니다.

모바일·긴 문구·가독성 확인하기

창을 좁혀 문구가 여러 줄이 되는 상황을 확인하세요. 예제는 문구 상자의 너비를 이미지보다 32px 작게 제한하고 padding과 반응형 글자 크기를 적용했습니다. 그러나 긴 설명 전체를 작은 이미지 안에 넣으면 읽기 어렵거나 이미지 밖으로 넘칠 수 있습니다. 이때는 글자를 무작정 줄이기보다 짧은 제목만 겹치고 자세한 설명을 이미지 아래에 두는 구성이 적합할 수 있습니다.

반투명 배경은 글자와 풍경을 구분하기 위한 것입니다. 부모 전체에 opacity를 주면 글자도 흐려지므로 색상의 알파를 사용했습니다. 실제 사진의 밝은 부분과 어두운 부분 위에서 모두 읽기 쉬운지 확인하고, 문구를 hover에서만 보여 주어 중요한 내용이 터치·키보드 사용자에게 숨겨지지 않도록 합니다.

텍스트가 정렬되지 않으면 이미지와 문구가 같은 부모에 있는지, 부모의 relative가 적용되는지, 다른 transform 규칙이 기존 translate를 덮어썼는지 확인하세요. 여러 transform 함수가 필요하면 하나의 transform 선언 안에서 순서와 효과를 함께 정해야 합니다.

이동 백분율의 기준은 MDN의 transform 설명, Grid의 개별 항목 정렬은 place-self 설명을 참고할 수 있습니다.

CSS