jquery로 div 가운데 정렬2.

div를 jquery로 가운데 정렬하는 방법.

jquery로 정렬해 보았습니다. 

window의 크기를 알아내서 top과 left를 지정해 줍니다.

Jquery.fn.center 부분을 common.js 등에 만들어서 저장해 두고 사용 하면

객체부분에 .center 만으로 가운데 정렬을 할수 있습니다.

//------------------------------------------------------------------------------------------------------------------------------------------------

//레이어 팝업 중앙 쿼리 생성.

jQuery.fn.center = function() {

this.css("position", "absolute");

this.css("top", Math.max(0, (($(window).height() - $(this)

.outerHeight()) / 2)

+ $(window).scrollTop())

+ "px");

this.css("left", Math.max(0,

(($(window).width() - $(this).outerWidth()) / 2)

+ $(window).scrollLeft())

+ "px");

return this;

}

// 문서가 준비되면

$(document).ready(function(){

// 가운데 정렬로 해라.

$('#wrapper').center();

});

 

 <style>

    #wrapper {

      width: 200px;

      height: 200px;

  border: 1px solid black;

    }

  </style>

 

   <div id="wrapper">

  가운데 정렬 ?

  </div>

//------------------------------------------------------------------------------------------------------------------------------------------------

div jquery로 가운데 정렬 끝 ~!!