<div>jQuery를 사용하여 화면 중앙에서 a 를 설정하는 방법은 무엇입니까?

답변

jQuery에 함수를 추가하는 것이 좋으 므로이 함수가 도움이 될 것입니다.

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;
}

이제 우리는 다음과 같이 쓸 수 있습니다.

$(element).center();

데모 : 바이올린 (파라미터 추가)

답변

여기에 jquery 플러그인을 넣었습니다.

매우 짧은 버전

$('#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({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    });
})(jQuery);

이 코드에 의해 활성화 :

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

플러그인 버전

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, 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 += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'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});
    });
);

맞습니까?

업데이트 :

에서 CSS-트릭

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

답변

jQueryUI Position 유틸리티를 추천 합니다

$('your-selector').position({
    of: $(window)
});

센터링보다 더 많은 가능성을 제공합니다 …

답변

여기 내가 간다. 라이트 박스 복제에 사용했습니다. 이 솔루션의 주요 장점은 창의 크기를 조정하더라도 요소가 자동으로 중앙에 유지되므로 이러한 종류의 사용에 이상적입니다.

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

답변

CSS 만 사용하여 다음과 같이 가운데에 맞출 수 있습니다.

작업 예

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}

<div class="center"></div>

스 니펫 확장

calc() CSS로 기본 계산을 수행 할 수 있습니다.

calc()브라우저 지원 테이블에 대한 MDN 설명서

답변

@TonyL이 제공 한 위대한 답변을 확장하고 있습니다. 값을 래핑하기 위해 Math.abs ()를 추가하고 있으며 jPress가 예를 들어 WordPress와 같이 “충돌 없음”모드에있을 수 있음을 고려합니다.

아래에서 한 것처럼 Math.abs ()로 위쪽 및 왼쪽 값을 래핑하는 것이 좋습니다. 창이 너무 작고 모달 대화 상자의 상단에 닫기 상자가 있으면 닫기 상자가 보이지 않는 문제를 방지 할 수 있습니다. Tony의 함수는 음수 값을 가졌을 것입니다. 음수 값으로 끝나는 방법에 대한 좋은 예는 큰 가운데 대화 상자가 있지만 최종 사용자가 여러 도구 모음을 설치하거나 기본 글꼴을 증가시킨 경우입니다 (이 경우 모달 대화 상자의 닫기 상자) 상단)에 표시되지 않고 클릭 할 수 없습니다.

내가하는 또 다른 일은 $ (window) 객체를 캐싱하여 여분의 DOM 통과를 줄이고 클러스터 CSS를 사용하는 것입니다.

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

사용하려면 다음과 같은 작업을 수행하십시오.

jQuery(document).ready(function($){
  $('#myelem').center();
});

답변

jQuery UI position 함수를 사용합니다 .

작업 데모를 참조하십시오 .

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

ID가 “test”인 div가 가운데에 있으면 다음 스크립트는 문서 준비 창에서 div를 가운데에 배치합니다. 위치 옵션에서 “my”및 “at”의 기본값은 “center”입니다.

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>