jq_jquery를 사용하여 div를 중앙에 배치하는 좋은 방법을 공유하세요.

매우 짧은 버전:

复aze代码 代码如下:

$('#myDiv ').css({top:'50%',left:'50%',margin:'-' ($('#myDiv').height() / 2) 'px 0 0 -' ($(' #myDiv').width() / 2) 'px'});

짧은 버전:

复主代码 代码如下:

(function($){
    $.fn .extend({
        center: function () {
            return this.each(function() {
               var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
               $(this).css({위치:'절대', 여백: 0, 상단: (상단 > 0 ? 상단: 0) 'px', 왼쪽: (왼쪽 > 0 ? 왼쪽: 0) 'px'});
           });
        }
    } );
})(jQuery);

이 코드로 활성화됨:
$('#mainDiv').center();
 

플러그인 버전

复主代码 代码如下:

(function($){
     $.fn.extend({
          center: 함수(옵션) {
               var options =  $.extend({ // 기본값
inside:window, // 요소, 창 중심
                    전환: 0, // 밀리초, 전환 시간
                  minX:0, // 픽셀, 최소 왼쪽 요소 값
                   minY:0, // 픽셀, 최소 상단 요소 값
                   withScrolling:true, // 부울, 스크롤 막대 관리(scrollTop)
                   Vertical:true, // 부울, 중앙 수직
                   수평: true // , 중앙 가로
             }, options);
               return this.each(function() {
                  var props = {position:'absolute'};
                   if (options.vertical ) {
                         var top = ($ (options.inside).height() - $(this).outerHeight()) / 2;
                       if (options.withScrolling) top = $(options.inside).scrollTop() || 0;
                        top = (top > options.minY ? top : options.minY);
                     $.extend(props, {top: top 'px'});
                    }
                    if ( options.horizontal) {
                        var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                               if (options.withScrolling) left = $(option s. 내부).scrollLeft() || 0;
                         왼쪽 = (왼쪽 > options.minX ? 왼쪽 : options.minX);
                      $.extend(props, {왼쪽: 왼쪽 'px'});
                    }
                    if ( options.transition > 0) $(this).animate(props, options.transition);
                  else $(this).css(props);
            return $(this);
              });
          }
     });
})(jQuery);

이 코드로 활성화됨:

复代码 代码如下:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);