웹 페이지 레이아웃을 작업하다 보면 부모 요소 안에서 자식 요소를 가로 방향 중앙에 배치해야 하는 경우가 매우 자주 발생합니다. 이 글에서는 하나의 HTML 파일과 하나의 CSS 파일(style.css)을 사용하여, 바깥쪽 div(o-div) 안에서 안쪽 div(i-div)를 가로로 가운데 정렬하는 방법을 단계별로 살펴보겠습니다.
HTML 예제 코드
아래 예제에서 o-div는 바깥쪽 컨테이너 역할을 하고, 그 안에 배치된 i-div가 가운데 정렬될 대상입니다.
<html> <head> <title>center a div</title> <link href="../../Content/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="o-div"> I am OUTER DIV <div class="i-div"> I am INNER DIV, I am in Center </div> </div> </body> </html>
실행 결과
I am OUTER DIV I am INNER DIV, I am in Center
style.css 스타일 코드
body {
background-color: Gray;
padding: 30px;
}
.o-div {
padding: 50px;
background-color: Lime;
}
.i-div {
background-color: Fuchsia;
max-width: 400px;
height: 200px;
margin: 0 auto;
text-align: center;
}핵심 원리 설명
위 코드에서 가로 가운데 정렬을 실제로 담당하는 것은 .i-div에 적용된 다음 두 가지 속성입니다.
1. max-width: 400px;
블록 레벨 요소인 div는 기본적으로 사용 가능한 전체 너비를 차지합니다. 이렇게 되면 남는 공간이 없어 정렬할 여지가 없습니다. 따라서 max-width 또는 width로 요소의 너비를 제한해야 좌우 여백이 생기고, 가운데 정렬이 가능해집니다.
2. margin: 0 auto;
상하 마진은 0으로, 좌우 마진은 auto로 지정하는 방식입니다. 브라우저는 auto 값을 만나면 남은 가로 공간을 양쪽에 균등하게 분배하기 때문에, 결과적으로 요소가 부모 요소의 수평 중앙에 위치하게 됩니다.
참고로 text-align: center;는 div 자체를 정렬하는 것이 아니라, div 내부의 텍스트와 인라인 요소를 가운데 정렬하는 속성이라는 점도 함께 기억해 두시면 좋습니다.
추가 팁: Flexbox 활용하기
모던 CSS에서는 Flexbox를 사용해 더 유연하게 정렬할 수도 있습니다. 부모 요소인 .o-div에 아래와 같이 선언하면 자식 요소가 자동으로 가로 중앙에 배치됩니다.
.o-div {
display: flex;
justify-content: center;
}이 방식은 자식 요소의 너비를 미리 알지 못해도 적용할 수 있다는 장점이 있으며, 세로 방향 정렬(align-items: center;)과 조합하면 완전한 중앙 정렬도 손쉽게 구현할 수 있습니다.