position absolute에서 특정요소 세로 정렬하는 방법

세로 정렬을 하기 위한 방법들은 몇가지의 방법들이 있습니다. 가장 쉬운 방법중 하나가 table 태그를 사용하는 방법입니다. table을 사용하면 안에 있는 요소는 자동으로 세로정렬됩니다. 아니면 display의 속성을 table과 table-cell로 변경하는 방법 역시 유용합니다. 이 방법들은 아래 링크에 잘 소개되어 있으니 참고하세요.

특정요소를 세로정렬하는 방법 바로가기 >

그런데 이 방법을 사용하기 위해서는 세로정렬하게 될 요소가 position: absolute; 즉 절대값을 가지면 안됩니다... 하지만 이를 가능하게 하기 위해서 다른 방법을 사용해야 하는데 오늘 알아볼 방법은 바로 이 방법입니다. 먼저 아래 예제를 참고해주세요.


# 세로 정렬 방법 예제보기
* HTML 코드

* CSS 코드


위 코드에서 핵심은 바로 padding-top의 값으로 45%를 주어 세로 정렬을 만드는 것입니다. 그리고 height를 5%로 설정할 경우 합쳐서 50% 즉 세로정렬이 가능하게 되는 것이죠. 아시겠지만 세로정렬될 코드가 안에서 정렬되기 위해서는 부모태그가 position: 값을 가지고 있어야 가능합니다. 아래는 실제 나타나는 모습이니다.

* 실제 코드 실행시..