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

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

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


# 세로 정렬 방법 예제보기
* HTML 코드
<div>
<p>Middle Align</p>
</div>

* CSS 코드
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #d1d1d1;
box-sizing: border-box;
position: relative;
}
div p {
position: absolute;
margin: 0;
width: 100%;
text-align: center;
height: 5%;
padding-top: 45%;
}
</style>


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

* 실제 코드 실행시..

Middle Align