[HTML/CSS] div 태그에서 가장 간단하게 수직 정렬(vertical align)하기

수직 정렬에서 가장 간단한 방법은 CSS로 vertical-align 속성에 middle을 주는 것입니다.

그러나 vertical-align 속성은 inline 요소 혹은 table-cell 요소에만 적용이 된다는 한계점이 있습니다.

 

그래서 div태그에서 vertical align을 하기가 굉장히 까다롭습니다.

div태그는 태그 중에서 block 요소에 속하기 때문에 위에 있는 vertical-align 요소가 동작하지 않기 때문입니다.

 

그러나 css에서는 요소의 특징을 변경할 수 있는 display라는 속성을 제공하는데, 바로 이것을 가지고 div태그의 요소를 바꾸어 간단하게 수직 정렬을 적용할 수 있는 방법을 알아보겠습니다.

 

CSS에서

div {

  display: table-cell;

  vertical-align: middle;

}

이렇게 적용해 주시면, 바로 div 태그에 수직정렬이 적용되는 것을 보실 수 있습니다.

 

table-cell이외에도 inline에도 vertical-align이 적용되지만, inline을 요소로 적용하게 되면, 미리 div에서 적용하였던 width와 height 등 여러 속성이 적용이 안되는 문제점이 있기 때문에 바로 table-cell로 바꾸어 준 것입니다.

 

그리고 vertical-align은 top, middle, bottom으로 설정해주시면 각 수직 상단, 중단, 하단으로 정렬됩니다.

 

 

여담으로 요소를 flex로 만들어서 수직 중앙정렬을 먹일수도 있습니다.

div {

  display: flex;

  align-items: center;

}

 

 

* 사실 이 방법은 약간의 꼼수에 가까운데, table : table-cell의 관계를 무시한 채 강제적으로 div의 block 요소만 table-cell요소로 바꾸어준 것이기 때문입니다. table : table-cell 요소는 html에서 <table> : <td>의 요소이며, 사실 html에서는 <table> 아래에 <td>가 들어가야 제대로 동작하는 것에 비교해보면 사실 상위에 div를 하나 더 만들어서 그 상위 div를 display: table;로 만들어주는 것이 엄밀하게 제대로 사용한 것이라고 볼 수 있습니다.