페이지 세로 정렬

가로 정렬은 흔히 알려진 margin:0 auto; 만으로 간단히 해결이 가능하다.

그런데 세로로 정렬을 하려면?

브라우저 사이즈에 따라 유동적으로 움직이게 하려면?

$(document).ready(function(){ 

var currentHeight = $(window).height(); 

$("#wrapper").each(function(){ 

var wrapperHeight = $(this).css("height"); // wrapper의 height 구하기 

if (parseInt(currentHeight) > parseInt(wrapperHeight)){ 

var newHeight = parseInt(currentHeight) - parseInt(wrapperHeight); 

newHeight = newHeight/2; 

$(this).css('margin-top',newHeight); 

} 

}); 

}); 

위 스크립트로 브라우저의 뷰포트(툴바, 창틀 등을 제외한 순수 컨텐츠 영역)의 사이즈를 구해 마진을 조절해 준다.

매 변동시마다 적용하려면 resize 함수를 사용해 보길 바란다.

혹은, body옵션으로 onresize도 있지만 적극 추천하진 않는다.