[CSS] 세로중앙정렬

Table은 자체로 valign속성으로 세로중앙정렬을 가능하게 하지만
현제 레이아웃 기법으로 많이 쓰이는 div는 세로로 중앙정렬 시키기가 참으로 난감하다.

1. 스크립트로 세로 중앙 정렬 시킨다.
<script type="text/javascript">
 objs = document.getElementsByTagName('DIV');
 for (var i = 0 ; i < objs.length ; i++ ) {
 if (objs[i].className == "vAlign")
 objs[i].style.marginTop = Math.floor(parseInt(objs[i].parentNode.offsetHeight - objs[i].offsetHeight) / 2)+"px";
 }
}
window.onload = vAlign;
</script>

<style type="text/css">

div.box{height:300px;}
</style>
<div class="box">

<div class="vAlign">세로중앙정렬</div>

</div>

스크립트가 알아서 계산해주기 때문에 편하다~>ㅁ<~

2. CSS를 활용한다.
<style type="text/css">
div.box{height:100px;position:relative;}
ul.vertical{position:absolute;top:50%;margin-top:-20px;}
ul.vertical li{height:30px;}
</style>

<div class="box">

<ul class="vertical">

<li>세로중앙정렬</li>

</ul>

</div>

ul을 absolute로 50%만큼 떨어트리고 li의 높이에 따라서 margin-top:-값으로 끌어 올리는 것이다.
li의 높이값이 커지면 그만큼 margin-top:-값을 늘려줘야 한다.

이방법은 유동적인 레이아웃에 적합하지 않으므로
고정된 레이아웃 상태에서만 사용이 가능하다.(계산하기 귀찮아짐의 압박이...__);