HTML에서 div 요소를 가운데 정렬하는 방법은 목적에 따라 두 가지로 나뉩니다. 먼저 div 내부의 텍스트나 인라인 요소를 중앙에 배치하려면 text-align: center 속성을 사용하고, div 요소 자체를 화면 중앙에 배치하려면 margin: 0 auto 속성을 사용합니다.
1. 내부 콘텐츠 가운데 정렬 — text-align: center
text-align: center는 div 안에 있는 텍스트, 이미지 등 인라인(inline) 또는 인라인 블록(inline-block) 요소들을 수평 방향으로 중앙에 배치합니다.
2. div 자체를 가운데 정렬 — margin: 0 auto
margin: 0 auto는 위아래 여백을 0으로, 좌우 여백을 자동(auto)으로 설정하여 div 요소 자체를 부모 컨테이너의 수평 중앙에 위치시킵니다. 이때 반드시 width 값이 지정되어 있어야 합니다. 너비가 지정되지 않으면 div가 기본적으로 전체 폭을 차지하기 때문에 정렬 효과가 나타나지 않습니다.
적용 예제 코드
실제 코드에서는 아래와 같이 작성할 수 있습니다.
<div style="text-align:center; width:300px; margin:0 auto; border-style:dotted;"> <p>hi</p> </div>
위 예제에서는 하나의 div에 두 가지 기법을 모두 적용했습니다. width: 300px로 고정 너비를 지정하고 margin: 0 auto로 div 자체를 중앙에 배치했으며, text-align: center로 내부의 <p> 태그 텍스트도 함께 중앙 정렬했습니다. border-style: dotted는 점선 테두리를 추가하여 div의 영역을 시각적으로 확인할 수 있게 해줍니다.
실행 결과
참고로 최신 CSS에서는 Flexbox(display: flex; justify-content: center;)나 Grid(display: grid; place-items: center;)를 활용하면 수직·수평 정렬을 더욱 유연하게 처리할 수 있습니다.