HTML5 SVG를 화면 중앙에 배치하는 방법

SVG 요소를 화면 가운데 정렬하려면 CSS의 margin-left: auto;와 margin-right: auto; 속성을 활용하면 됩니다. 다만 SVG는 기본적으로 인라인(inline) 요소이기 때문에, 반드시 display: block;으로 지정해야 자동 마진이 정상적으로 작동한다는 점에 유의하세요.

CSS 코드

#svgelem {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

코드 설명:

display: block; — SVG를 블록 레벨 요소로 변경하여 부모 요소의 가로 폭 전체를 차지하게 만듭니다.
margin-left: auto; margin-right: auto; — 좌우 여백을 자동으로 균등 분배하여 수평 중앙 정렬을 구현합니다.

SVG 예제 코드

다음은 중앙에 배치할 SVG입니다.

<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

위 예제는 높이 200px의 SVG 캔버스 안에 빨간색 원(<circle>)을 하나 그리는 코드입니다. 앞서 작성한 CSS를 함께 적용하면 이 SVG가 페이지의 수평 중앙에 깔끔하게 배치됩니다.

응용: 수직·수평 완전 중앙 정렬하기

화면의 정중앙(수직과 수평 모두)에 SVG를 배치하고 싶다면 Flexbox를 사용하는 것이 가장 간단한 방법입니다.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

justify-content: center;는 수평 방향, align-items: center;는 수직 방향 정렬을 담당하며, min-height: 100vh;를 지정하면 뷰포트 전체 높이를 기준으로 정확히 한가운데에 요소를 놓을 수 있습니다.