CSS 작업 시 상하좌우 중앙정렬을 많이 사용합니다. 특히 높이(height)가 고정일 때와 반응형으로 높이(height)가 변동일 때 사용방법이 좀 다른데요. 이번 시간은 상하좌우 중앙정렬에 대해서 한번 알아보겠습니다.
사용 전 기본 세팅
// HTML <div class="contents-wrap"> <div class="txt-wrap">상하좌우 정렬</div> </div>
// CSS
.contents-wrap {
width: 100%;
height: 250px;
}
.txt-wrap {
background-color:skyblue;
color:#fff;
padding:10px;
}transform 사용법
.contents-wrap {
position: relative;
background-color:#eee;
}
.contents-wrap .txt-wrap {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
}결과보기
상하좌우 정렬
flex 사용법
.contents-wrap {
display: flex;
align-items: center;
justify-content: center;
background-color:#ddd;
}
결과보기
상하좌우 정렬
vertical-align 사용법
.contents-wrap {
background-color:#ccc;
text-align:center;
vertical-align:middle;
line-height:250px;
}
결과보기
상하좌우 정렬
마무리
transform, flex의 경우는 가로(width), 높이(height)가 변동이 있어도 항상 중앙정렬을 하지만, vertical-align의 경우는 높이가 변동이 생기면, line-height의 값도 변동값을 적용해줘야 하는 번거로움이 있습니다. 최근에는 사용법이 간단한 flex를 주로 사용하고 있습니다.