웹 페이지 레이아웃을 구축할 때 요소를 수직으로 중앙에 배치하는 것은 흔하고 중요한 작업입니다. 다양한 CSS 속성을 활용하여 다양한 시나리오에 맞는 여러 가지 수직 중앙 정렬 방법을 구현할 수 있습니다. 이 글에서는 인라인 요소와 블록 요소 모두에 적용할 수 있는 주요 기법들을 살펴봅니다.
1. 단일 행 텍스트 수직 중앙 정렬: line-height 활용
단일 행으로 구성된 텍스트 요소를 수직 중앙에 배치할 때 line-height 속성을 요소의 height와 동일하게 설정하는 방법이 유용합니다. 이 방법은 주로 텍스트를 포함하는 작은 컨테이너에 적용됩니다.
HTML
<div class="single-line-text">중앙 정렬 텍스트</div>
CSS
.single-line-text {
width: 150px;
height: 60px;
background-color: #E6F7FF;
line-height: 60px; /* height와 동일하게 설정하여 텍스트를 수직 중앙에 배치 */
text-align: center; /* 가로 중앙 정렬 */
color: #333;
border: 1px solid #cce;
}
2. 블록 요소 중앙 정렬: 절대 위치 지정 및 음수 마진
블록 레벨 요소를 부모 컨테이너 내에서 중앙에 배치하는 전통적인 방법 중 하나입니다. 자식 요소에 position: absolute를 적용하고 top: 50%, left: 50%로 설정한 다음, 요소 크기의 절반만큼 음수 margin 값을 주는 방식입니다. 이 방식은 중앙 정렬할 요소의 정확한 너비와 높이를 미리 알고 있을 때 효과적입니다. 마진 값은 픽셀(px) 단위뿐만 아니라 부모 요소에 대한 백분율(%)로도 설정할 수 있습니다.
HTML
<div class="container-abs-margin">
<div class="content-box">콘텐츠</div>
</div>
CSS
.container-abs-margin {
width: 250px;
height: 180px;
background-color: #f5f5f5;
position: relative; /* 자식 요소의 기준점 설정 */
border: 1px solid #ccc;
}
.content-box {
position: absolute;
top: 50%; /* 부모의 상단에서 50% 이동 */
left: 50%; /* 부모의 좌측에서 50% 이동 */
width: 120px;
height: 70px;
margin-top: -35px; /* 요소 높이의 절반만큼 위로 이동 (70px / 2) */
margin-left: -60px; /* 요소 너비의 절반만큼 왼쪽으로 이동 (120px / 2) */
background-color: #D9EDF7;
line-height: 70px;
text-align: center;
color: #555;
}
3. 블록 요소 중앙 정렬: 절대 위치 지정 및 transform
이 방법은 이전 음수 마진 방식의 단점(요소 크기를 미리 알아야 함)을 보완합니다. 요소의 크기를 미리 알 필요 없이, top: 50%, left: 50%로 설정한 후 transform: translate(-50%, -50%)를 사용하여 요소 자체 크기의 절반만큼 이동시키는 방식입니다. translate() 함수의 백분율 값은 요소 자신의 크기를 기준으로 하기 때문에 유연성이 높으며, 현대적인 웹 브라우저에서 널리 지원됩니다.
HTML
<div class="container-transform">
<div class="transform-item">가변 크기</div>
</div>
CSS
.container-transform {
width: 280px;
height: 200px;
background-color: #f0f8ff;
position: relative;
border: 1px dashed #aaa;
}
.transform-item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 요소 자체 크기의 50%만큼 이동 */
width: 110px;
height: 60px;
background-color: #C0FFEE;
line-height: 60px;
text-align: center;
color: #444;
}
4. 블록 요소 중앙 정렬: 절대 위치 지정 및 margin: auto
이 기법은 position: absolute와 margin: auto를 결합하여 요소를 중앙에 배치합니다. 자식 요소의 top, bottom, left, right 속성을 모두 0으로 설정한 다음, margin: auto를 적용하면 브라우저가 자동으로 마진을 계산하여 요소를 부모 컨테이너의 중앙에 정렬합니다. 이 방법은 요소의 너비와 높이를 명시적으로 지정하지 않아도 (예: 이미지처럼 내부 콘텐츠가 고유한 크기를 가지는 경우) 중앙 정렬이 가능합니다.
HTML
<div class="container-auto-margin">
<div class="auto-item">자동 정렬</div>
</div>
<!-- 이미지 중앙 정렬 예시 -->
<div class="container-image-auto">
<img src="path/to/your/image.png" alt="Sample Image" class="centered-image"/>
</div>
CSS
.container-auto-margin {
width: 300px;
height: 220px;
background-color: #f8f8f8;
position: relative;
border: 2px groove #ddd;
}
.auto-item {
position: absolute;
top: 0; bottom: 0; /* 세로로 채우고 */
left: 0; right: 0; /* 가로로 채움 */
width: 140px;
height: 80px;
margin: auto; /* 자동 마진으로 중앙 정렬 */
background-color: #FFE6CC;
line-height: 80px;
text-align: center;
color: #666;
}
/* 이미지 중앙 정렬 CSS */
.container-image-auto {
width: 200px;
height: 150px;
background-color: #eee;
position: relative;
margin-top: 20px; /* 예시를 위한 마진 */
border: 1px dashed #bbb;
}
.centered-image {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
/* 이미지 자체 크기가 있으므로 width/height는 생략 가능 */
}
5. 이미지 수직 중앙 정렬: line-height와 vertical-align
단일 이미지나 인라인 블록 요소를 수직 중앙에 배치할 때 부모 요소의 line-height를 높이와 동일하게 설정하고, 자식 요소에 vertical-align: middle을 적용하는 방법입니다. 부모 요소에 text-align: center를 추가하여 가로 중앙 정렬도 함께 구현할 수 있습니다.
HTML
<div class="container-image-lineheight">
<img src="path/to/another/image.svg" alt="Central Icon" class="image-valign"/>
</div>
CSS
.container-image-lineheight {
width: 240px;
height: 160px;
line-height: 160px; /* 부모 높이와 동일하게 설정 */
text-align: center; /* 가로 중앙 정렬 */
background-color: #fafafa;
border: 1px solid #cce;
}
.image-valign {
vertical-align: middle; /* 수직 중앙 정렬 */
}
6. 부모 요소 padding 활용
부모 요소에 상하 padding 값을 동일하게 부여하여 자식 요소를 수직 중앙에 위치시키는 간단한 방법입니다. 이 경우 부모의 높이를 명시적으로 지정하지 않거나, padding 값과 자식 요소의 높이를 고려한 값을 지정해야 합니다. 자식 요소는 margin: auto를 사용하여 가로 중앙 정렬을 할 수 있습니다.
HTML
<div class="container-padding">
<div class="padded-child">내부 콘텐츠</div>
</div>
CSS
.container-padding {
width: 260px;
padding: 60px 0; /* 상하 패딩을 동일하게 설정 */
background-color: #f7fff7;
border: 1px dotted #9dd;
}
.padded-child {
width: 130px;
height: 40px;
margin: 0 auto; /* 가로 중앙 정렬 */
background-color: #CCFFE6;
line-height: 40px;
text-align: center;
color: #363;
}
7. display: table 및 vertical-align
CSS display: table과 display: table-cell 속성을 활용하여 테이블 셀처럼 요소를 중앙에 정렬하는 방법입니다. 부모 요소를 display: table로 설정하고 자식 요소를 display: table-cell로 설정한 뒤 vertical-align: middle을 적용하면 됩니다. 이 방법은 특히 콘텐츠의 높이가 가변적일 때 유용하게 사용될 수 있습니다.
HTML
<div class="table-container">
<div class="table-cell-content">테이블 셀 정렬 텍스트입니다. 내용이 길어질 수 있습니다.</div>
</div>
CSS
.table-container {
width: 220px;
height: 150px;
display: table; /* 부모를 테이블처럼 */
background-color: #e0f2f7;
border: 1px solid #7cb;
}
.table-cell-content {
display: table-cell; /* 자식을 테이블 셀처럼 */
vertical-align: middle; /* 수직 중앙 정렬 */
text-align: center; /* 가로 중앙 정렬 */
color: #272;
}
8. Flexbox 활용
가장 현대적이고 유연한 수직 중앙 정렬 방법은 Flexbox를 사용하는 것입니다. 부모 컨테이너에 display: flex를 적용하고, justify-content: center로 가로 중앙 정렬, align-items: center로 수직 중앙 정렬을 쉽게 구현할 수 있습니다. 이 방법은 자식 요소의 크기를 미리 알 필요가 없으며, 다양한 레이아웃 시나리오에 강력하게 활용됩니다. 인라인 요소에도 동일하게 적용 가능하며, 대부분의 최신 브라우저에서 잘 지원됩니다.
HTML
<div class="flex-container">
<div class="flex-item">플렉스 아이템</div>
</div>
CSS
.flex-container {
display: flex; /* Flexbox 활성화 */
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 수직 중앙 정렬 */
width: 300px;
height: 200px;
background-color: #fff0f5;
border: 2px dashed #f0c;
}
.flex-item {
width: 100px;
height: 60px;
background-color: #FFC0CB;
line-height: 60px;
text-align: center;
color: #704;
}