HTML5에서 캔버스를 화면 중앙에 배치하는 방법

HTML5에서 캔버스(canvas) 요소를 중앙에 배치하려면, 캔버스 태그를 <div> 태그로 감싼 뒤 해당 div에 가운데 정렬 스타일을 적용하는 방법을 사용할 수 있습니다. div가 중앙 정렬되면 그 안에 포함된 캔버스도 함께 중앙에 배치됩니다.

기본 예제

<!DOCTYPE html>
<html>
   <body>
      <div style = "text-align:center;">
         <canvas style = "background-color:GREEN;">This is my canvas</canvas>
      </div>
   </body>
</html>

동작 원리

위 코드의 핵심은 text-align: center; 속성입니다. 이 속성은 인라인(inline) 또는 인라인 블록(inline-block) 요소를 부모 컨테이너 기준으로 수평 가운데 정렬합니다. <canvas>는 기본적으로 인라인 요소로 취급되므로, 부모 div에 이 속성을 지정하면 캔버스가 자동으로 중앙에 배치됩니다.

CSS 클래스를 활용한 방법

인라인 스타일 대신 CSS 클래스를 사용하면 코드를 더 깔끔하게 관리할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
   <style>
      .canvas-container {
         text-align: center;
      }
      canvas {
         background-color: GREEN;
      }
   </style>
</head>
<body>
   <div class = "canvas-container">
      <canvas width = "300" height = "150">This is my canvas</canvas>
   </div>
</body>
</html>

Flexbox를 활용한 세로·가로 완전 중앙 정렬

캔버스를 화면의 정중앙(수평 및 수직 모두)에 배치하고 싶다면 Flexbox를 활용하는 것이 좋습니다.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         margin: 0;
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      canvas {
         background-color: GREEN;
      }
   </style>
</head>
<body>
   <canvas width = "300" height = "150">This is my canvas</canvas>
</body>
</html>

정리

수평 중앙 정렬만 필요한 경우: 캔버스를 div로 감싸고 text-align: center;를 적용합니다.
수평·수직 모두 중앙 정렬이 필요한 경우: Flexbox의 justify-content와 align-items 속성을 활용합니다.

상황에 맞는 방법을 선택하면 다양한 레이아웃에서 캔버스를 손쉽게 중앙에 배치할 수 있습니다.