CSS vertical-align 완벽 가이드



CSS에서 요소를 수직 정렬하는 것은 많은 개발자들이 어려워하는 부분입니다. vertical-align 속성과 다양한 수직 정렬 기법을 알아봅니다.



1. vertical-align 속성 이해하기



vertical-align은 인라인 요소나 테이블 셀에서만 동작합니다.



/* 인라인 요소에서 사용 */
img {
  vertical-align: middle;
}

/* 테이블 셀에서 사용 */
td {
  vertical-align: middle;
}


2. Flexbox로 수직 정렬 (권장)



.container {
  display: flex;
  align-items: center;      /* 수직 중앙 */
  justify-content: center;  /* 수평 중앙 */
  height: 200px;
}

/* 자식 요소 개별 정렬 */
.child {
  align-self: flex-start;   /* 상단 */
  align-self: center;       /* 중앙 */
  align-self: flex-end;     /* 하단 */
}


3. Grid로 수직 정렬



.container {
  display: grid;
  place-items: center;  /* 수직, 수평 모두 중앙 */
  height: 100vh;
}


4. 절대 위치 + Transform



.parent {
  position: relative;
  height: 300px;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


5. Line-height 활용 (단일 라인)



.button {
  height: 50px;
  line-height: 50px;  /* height와 동일하게 */
  text-align: center;
}


vertical-align 속성값












값설명
baseline부모 기준선 정렬 (기본값)
top라인 박스 상단 정렬
middle부모 중앙 정렬
bottom라인 박스 하단 정렬
sub아래첨자 위치
super위첨자 위치
길이/퍼센트기준선에서 이동


실전 팁




  • 블록 요소에는 vertical-align이 작동하지 않음

  • 이미지 하단 여백 문제는 vertical-align: bottom 으로 해결

  • 신규 프로젝트는 Flexbox나 Grid 사용 권장

  • IE 지원 필요시 table-cell 기법 활용