CSS로 이미지를 화면 중앙에 정렬하는 방법

이미지를 화면 중앙(가운데)에 정렬하려면 CSS의 margin-left와 margin-right 속성을 auto 값으로 설정하고, 이미지가 블록 레벨 요소로 동작하도록 display: block을 함께 지정해야 합니다.

<img> 태그는 기본적으로 인라인(inline) 요소이기 때문에 좌우 마진 자동 적용만으로는 정렬되지 않습니다. 반드시 display: block;을 먼저 선언한 후 마진을 auto로 지정해야 의도대로 중앙 정렬됩니다.

CSS 이미지 중앙 정렬 예제

아래 코드를 실행하면 이미지가 화면 가운데 정렬된 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            border: 2px solid orange;
            border-radius: 3px;
            padding: 7px;
         }
         img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
   </body>
</html>

코드 설명

display: block; — 이미지를 인라인에서 블록 요소로 변경하여 마진 auto가 동작하게 만듭니다.
margin-left: auto; margin-right: auto; — 남은 공간을 좌우 균등하게 배분해 이미지를 수평 중앙에 배치합니다.
width: 50%; — 이미지 너비를 부모 요소의 50%로 지정하여 반응형으로 표시합니다.

참고: Flexbox를 활용한 방법

최신 CSS에서는 Flexbox를 사용해 더 유연하게 중앙 정렬할 수도 있습니다.

body {
   display: flex;
   justify-content: center;
}

justify-content: center;는 플렉스 컨테이너 내부의 항목을 수평 방향으로 가운데 정렬하므로, 별도의 마진 설정 없이 간단히 처리할 수 있습니다.