CSS 수직정렬하기

CSS 수직 중앙 정렬 하기

 

 

속성으로 텍스트를 세로 중앙에 정렬하는 방법으로 간단하게 적용이 가능한 3가지 방법입니다.

 

 

line-height: 130px

태그에 line-height 속성을 이용하여 행의 높이를 부여하는 방식으로 글의 높이가 지정되면 자동적으로 가운데 정렬이 되며 이 방식의 단점으로는 각 행마다 지정한 높이를 가진다는 점입니다.

 

 

padding: 60px 0

padding 속성을 이용하는 방법으로 상하 여백을 동일한 값을 적용하여 가운데 오게 하는데 각 행에 높이를 적용하지 않고 전체 내용 적용되어 가운데 정렬됩니다. 세로 여백을 적용을 하기 위해서는 display: block 속성을 가져야지만 가능해집니다.

 

 

height: 130px ; display: table-cell; vertical-align: middle

마지막 방법은 3가지 속성이 붙는데 높이를 정해주고 display: table-cell; vertical-align: middle 속성을 줌으로써 가운데로 오게끔 하는 방법입니다.

 

3가지 방법 중 장단점이 있지만 개인적으로는 마지막 방식이 다양한 환경에서 적용 가능하기에 많이 사용하는 방법입니다.

출처: https://1730.tistory.com/132 [1730.tistory.com]