CSS의 margin(마진) 속성을 활용하면 블록 레벨(block-level) 요소를 손쉽게 수평 가운데 정렬할 수 있습니다. 다만 이 방법이 정상적으로 작동하려면 해당 요소에 width 속성이 반드시 설정되어 있어야 합니다.
핵심 원리는 간단합니다. 좌우 마진 값을 auto로 지정하면(margin: 10px auto;), 브라우저가 부모 요소 안의 남은 공간을 좌우로 균등하게 나누어 자동으로 요소를 중앙에 배치합니다. 아래 예제를 통해 직접 확인해 보겠습니다.
예제 1: 음양 심볼 가운데 정렬하기
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin을 활용한 가운데 정렬</title>
<style>
#yinyangSymbol {
width: 100px;
height: 50px;
background: #fff;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yinyangSymbol::before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #fff;
border: 18px solid #000;
border-radius: 100%;
width: 14px;
height: 14px;
}
#yinyangSymbol::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000;
border: 18px solid #fff;
border-radius:100%;
width: 14px;
height: 14px;
}
div{
width: 50%;
margin: 10px auto;
border:4px solid black;
}
#text {
border: 4px solid black;
background-color: grey;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div>
<div id="yinyangSymbol"></div>
</div>
<div id="text">중앙 정렬과 균형</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이번에는 서로 다른 너비를 가진 여러 요소를 마진 속성으로 가운데 정렬하는 또 다른 예제를 살펴보겠습니다.
예제 2: 서로 다른 너비의 요소 가운데 정렬하기
<!DOCTYPE html>
<html>
<head>
<title>CSS Margin을 활용한 가운데 정렬</title>
<style>
.screen{
padding: 10px;
margin: 10px auto;
text-align: center;
color: white;
border-radius: 0 0 50px 50px;
border: 4px solid #000;
}
.screen1 {
background-color: #f06d06;
width: 70%;
}
.screen2 {
background-color: #48C9B0;
width: 50%;
}
.screen3 {
background-color: #DC3545;
width: 30%;
}
</style>
</head>
<body>
<div class="screen screen1">화면 70%</div>
<div class="screen screen2">화면 50%</div>
<div class="screen screen3">화면 30%</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
정리 및 참고 사항
margin: auto를 활용한 가운데 정렬은 블록 레벨 요소의 수평 정렬에만 적용됩니다. 몇 가지 유의할 점을 정리하면 다음과 같습니다.
- width 필수: 요소의 너비가 지정되지 않으면 블록 요소는 기본적으로 부모 영역 전체를 차지하므로, 마진 auto가 효과가 없습니다.
- 텍스트 정렬과의 차이:
text-align: center는 인라인 요소와 텍스트를 정렬하는 속성이며, 블록 요소 자체를 정렬하지 않습니다. 두 방식은 목적이 다르므로 상황에 맞게 선택해야 합니다. - 수직 정렬에는 부적합: 세로 방향 가운데 정렬이 필요하다면 flexbox(
display: flex,align-items: center)나 grid 레이아웃을 사용하는 것이 좋습니다.
이처럼 CSS margin 속성의 auto 값만 잘 활용해도 별도의 계산 없이 깔끔하게 요소를 중앙에 배치할 수 있습니다. 반응형 웹에서도 백분율(%) 너비와 함께 사용하면 화면 크기에 관계없이 일관된 중앙 정렬을 유지할 수 있다는 점도 기억해 두세요.