CSS에서 웹사이트 전체를 화면의 가로 중앙에 배치하려면 컨테이너 요소에 margin: auto와 함께 max-width를 지정하는 것이 가장 간단하고 널리 쓰이는 방법입니다. 좌우 마진을 auto로 설정하면 브라우저가 남은 공간을 양쪽에 균등하게 분배하여 요소가 자동으로 중앙에 위치하게 됩니다.
예제
아래 코드는 .main 클래스를 가진 컨테이너를 페이지 중앙에 정렬하는 완전한 HTML 문서입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
background: rgb(255, 238, 0);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.main {
max-width: 600px;
margin: auto;
background: rgb(70, 32, 240);
color: white;
padding: 10px;
}
p {font-size: 40px;font-weight: lighter;}
</style>
</head>
<body>
<div class="main">
<h1>Center website horizontally example</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad nemo, nisi fugiat dolores
quidem ipsam, quisquam sit, quos amet provident accusantium. Ab cumque est ut officia libero,
quis non quidem eaque eligendi iusto numquam, optio magni corrupti, eum ad. </p>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
코드 설명
- max-width: 600px; — 컨테이너의 최대 너비를 600px로 제한합니다. 이 값이 없으면 블록 요소가 화면 전체 폭을 차지하기 때문에 중앙 정렬 효과가 보이지 않습니다.
- margin: auto; — 상하 마진은 0으로, 좌우 마진은 자동 계산되어 남은 공간이 양쪽에 균등하게 배분됩니다. 이것이 가로 중앙 정렬의 핵심입니다.
참고로 최신 CSS에서는 Flexbox나 Grid 레이아웃을 활용해 부모 요소에서 자식 요소를 정렬하는 방식(justify-content: center 등)도 널리 사용되지만, 단일 컨테이너를 중앙에 배치할 때는 위 예제처럼 margin: auto 방식이 가장 간결하고 호환성이 뛰어납니다.