화면 세로가운데 정렬(Jquery 이용)

div 개체의 세로 가운데 정렬에 대한 방법은 css, jquery 등 여러가지가 존재 하지만,

css 는 작동하지 않는 경우가 너무 많다.

확실한 방법은 jquery 를 이용하는 것이다.

- 아래 소스는 화면 로딩때 1번만 적용(이런 방식도 필요함)

<script type="text/javascript">
 $(document).ready(function() {
    $('.centered').css({position:'absolute'}).css({
         left: ($(window).width() - $('.centered').outerWidth())/2,
         top: ($(window).height() - $('.centered').outerHeight())/2
     });
 });
</script>

- 아래 소스는 화면 리사이즈 때마다  적용

</script>
 $( document ).ready(function() {
    $(window).resize();
 });
 $(window).resize(function(){
     $('.centered').css({position:'absolute'}).css({
         left: ($(window).width() - $('.centered').outerWidth())/2,
         top: ($(window).height() - $('.centered').outerHeight())/2
     });
 });
</script>

- 아래 소스는 html부분

 <div class="centered">
    <a href="#blog" data-role="button" data-icon="vs_photo" data-transition="slide">상품소개</a>
    <a href="#videos" data-role="button" data-icon="vs_video" data-transition="slideup">상품영상</a>
    <a href="#photos" data-role="button" data-icon="vs_blog" data-transition="slidedown">회사소개</a>
   </div>