CSS 정렬 완벽 가이드: 수평, 수직, 중앙 정렬 방법

CSS는 요소 자체 또는 요소 내부의 콘텐츠를 수평, 수직, 중앙 방향으로 정렬할 수 있는 다양한 옵션을 제공합니다. 상황에 맞는 정렬 기법을 익혀두면 레이아웃 작업이 훨씬 수월해집니다.

수평 정렬

인라인(Inline) 요소
텍스트, 앵커(a), span 등 인라인 또는 인라인 블록 요소는 CSS의 text-align 속성을 사용하여 수평 정렬할 수 있습니다.
블록 레벨(Block-level) 요소
div, p 같은 블록 레벨 요소는 CSS의 margin 속성으로 수평 정렬합니다. 단, 요소의 너비가 부모 요소 기준 100%라면 정렬 여지가 없으므로 너비를 지정해 주어야 합니다.
float 또는 position 방식 활용
CSS의 float 속성은 여러 요소를 좌/우로 배치할 때 유용하며(중앙 정렬은 불가), position: absolute 방식으로도 수평 위치를 조정할 수 있습니다.

수평 정렬 예제

영화관 좌석 배치를 모티프로 한 CSS 수평 정렬 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Horizontal Alignment</title>
<style>
.screen {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #f06d06;
    text-align: center;
    color: white;
    border-radius: 0 0 50px 50px;
    border: 4px solid #000;
}
.seats span, .backSeats div{
    margin: 10px;
    padding: 10px;
    color: white;
    border: 4px solid #000;
}
.seats span{
    width: 120px;
    display: inline-block;
    background-color: #48C9B0;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.center{
    text-align: center;
}
.seats{
    text-align: center;
}
.backSeats div {
    background-color: #dc3545;
}
.leftFloat{
    float: left;
}
.rightAbsolute{
    position: absolute;
    right: 150px;
}
</style>
</head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
<div class="backSeats">
<div class="leftFloat">Premium 1</div>
<div class="leftFloat">Premium 2</div>
<div class="rightAbsolute">Premium 3</div>
</div>
</div>
</body>
</html>

출력 결과

위 코드를 실행하면 스크린은 중앙에, 좌석들은 각각 좌측·중앙·우측으로 정렬되어 표시됩니다.

CSS 정렬 완벽 가이드: 수평, 수직, 중앙 정렬 방법

수직 정렬

인라인(Inline) 요소
텍스트, 앵커(a) 등 인라인 또는 인라인 블록 요소는 CSS의 padding, line-height, 또는 vertical-align 속성을 사용하여 수직 정렬할 수 있습니다.
블록 레벨(Block-level) 요소
div, p 같은 블록 레벨 요소는 margin 속성, flex와 align-items 조합, 또는 position: absolute와 transform 속성을 함께 사용하여 수직 정렬할 수 있습니다.

수직 정렬 예제

패딩, line-height, vertical-align, position+transform, flex 등 다양한 수직 정렬 기법을 한 번에 비교할 수 있는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Vertical Alignment</title>
<style>
.screen {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #f06d06;
    text-align: center;
    color: white;
    border-radius: 0 0 50px 50px;
    border: 4px solid #000;
}
.seats span:not(.withPadding){
    margin: 10px;
    padding: 10px;
    color: white;
    border: 4px solid #000;
}
.seats span:not(.vertical){
    height: 40px;
    display: inline-block;
    background-color: #48C9B0;
}
.withPadding{
    padding: 20px 20px 0px;
    height: 20px;
    color: white;
    border: 4px solid #000;
}
.vertical{
    display: inline-table;
    background-color: #48C9B0;
    height: 40px;
}
.verticalText {
    display: table-cell;
    vertical-align: middle;
}
.withLineHeight{
    line-height: 40px;
}
.seats{
    text-align: center;
}
.backLeftSeat{
    background-color: #dc3545;
    max-height: 100px;
    height: 70px;
    margin: 20px;
    width: 300px;
    display: inline-block;
    position: relative;
    resize: vertical;
    overflow: auto;
    border: 4px solid #000;
}
.withPosition{
    position: absolute;
    top: 50%;
    left: 2px;
    right: 2px;
    color: white;
    padding: 20px;
    transform: translateY(-50%);
}
.backRightSeats{
    height: 122px;
    width: 800px;
    float: right;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.withFlex {
    background-color: #dc3545;
    border: 4px solid #000;
    margin-right: 10px;
    color: white;
    padding: 20px;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="withPadding">Adam</span>
<span class="withLineHeight">Martha</span>
<span class="vertical"><p class="verticalText">Samantha</p></span>
<div>
<div class="backLeftSeat">
<div class="withPosition">Premium Readjustable Sofa</div>
</div>
<div class="backRightSeats">
<div class="withFlex">Premium Solo 1</div>
<div class="withFlex">Premium Solo 2</div>
<div class="withFlex">Premium Solo 3</div>
</div>
</div>
</body>
</html>

출력 결과

컨테이너 크기에 따라 정렬 상태가 달라지는 것을 확인할 수 있습니다.

div 크기를 조정하지 않은 경우

CSS 정렬 완벽 가이드: 수평, 수직, 중앙 정렬 방법

div 크기를 조정한 경우

CSS 정렬 완벽 가이드: 수평, 수직, 중앙 정렬 방법

중앙 정렬

요소를 화면 중앙에 배치하고 싶다면 위에서 소개한 수평 정렬과 수직 정렬 기법을 조합하면 됩니다. 대표적으로 margin: 0 auto로 수평 중앙을 잡고, flex의 align-items: center나 position + transform 조합으로 수직 중앙을 맞추는 방식이 널리 사용됩니다.