복붙노트

[JQUERY] jQuery를 사용하면 화면에 DIV를 중앙에

JQUERY

jQuery를 사용하면 화면에 DIV를 중앙에

해결법

  1. 1.이 기능이 도움이 될 수 있도록 jQuery를에 기능을 추가하는 등의 I :

    이 기능이 도움이 될 수 있도록 jQuery를에 기능을 추가하는 등의 I :

    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();

    데모 : (추가 매개 변수) 바이올린

  2. 2.여기의 플러그인 jQuery를 넣어

    여기의 플러그인 jQuery를 넣어

    아주 짧은 버전

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

    SHORT VERSION

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

  3. 3.내가 jQueryUI 위치 유틸리티를 추천 할 것입니다

    내가 jQueryUI 위치 유틸리티를 추천 할 것입니다

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

    이는 당신에게 단지를 중심으로보다 훨씬 더 많은 가능성을 제공합니다 ...

  4. 4.여기에서 내 이동이다. 내 라이트 박스 클론을 위해 그것을 사용하여 끝났다. 이 솔루션의 가장 큰 장점은 요소가 자동으로 윈도우가 사용 이런 종류의 위해 이상적인 크기를 조정할 경우에도 중심을 유지할 것입니다.

    여기에서 내 이동이다. 내 라이트 박스 클론을 위해 그것을 사용하여 끝났다. 이 솔루션의 가장 큰 장점은 요소가 자동으로 윈도우가 사용 이런 종류의 위해 이상적인 크기를 조정할 경우에도 중심을 유지할 것입니다.

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

  5. 5.당신은 너무 같은 중심에 혼자 CSS를 사용할 수 있습니다 :

    당신은 너무 같은 중심에 혼자 CSS를 사용할 수 있습니다 :

    작업 예

    .센터{ 위치 : 절대; 높이 : 50 픽셀; 폭 : 50 픽셀; 배경 : 빨간색; 상단 : 계산치 (50 % - 50 픽셀 / 2); / * 2 높이로 나눈 값 * / 좌측 : 계산치 (50 % - 50 픽셀 / 2); 2 분할 / * 폭 * / }

    CALC는 ()는 CSS에서 기본적인 계산을 수행 할 수 있습니다.

    CALC에 대한 MDN 문서 () 브라우저 지원 테이블

  6. 6.나는 @TonyL에 의해 주어진 좋은 대답에 확대하고있다. 나는 값을 래핑하는 Math.abs ()를 추가 해요, 또한 내가 jQuery를 워드 프레스의 예를 들어 같은 "충돌없이"모드에있을 수 있음을 고려.

    나는 @TonyL에 의해 주어진 좋은 대답에 확대하고있다. 나는 값을 래핑하는 Math.abs ()를 추가 해요, 또한 내가 jQuery를 워드 프레스의 예를 들어 같은 "충돌없이"모드에있을 수 있음을 고려.

    난 당신이 내가 아래에했던 것처럼 Math.abs ()와 상단과 왼쪽 값을 래핑하는 것이 좋습니다. 창이 너무 작고, 모달 대화 상자가 상단에 닫기 상자가있는 경우,이 닫기 상자가 표시되지 않는 문제를 방지 할 수 있습니다. 토니의 기능은 잠재적으로 음의 값을했을 것이다. (만약 모달 대화 상자에서, 이러한 경우에 닫기 상자를 - 당신은 큰 중심의 대화 상자를 가지고 있지만 최종 사용자가 여러 도구 모음을 설치 및 / 또는 자신의 기본 글꼴을 증가하는 경우는 음의 값으로 끝낼 방법에 대한 좋은 예이다 상단에) 표시되고 클릭 할 수 없습니다.

    내가 다른 것은 내가 여분의 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();
});

  7. 7.내가 jQuery를 UI 위치 기능을 사용할 수 있습니다.

    내가 jQuery를 UI 위치 기능을 사용할 수 있습니다.

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

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

    내가 중심에 ID가 "테스트"와 사업부가있는 경우 다음 스크립트는 준비가 문서 창에 사업부를 중심 것입니다. (의 기본 값은 "내"와 "에서"위치에 옵션 "센터"입니다)

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

  8. 8.나는 하나의 문제를 해결하고 싶습니다.

    나는 하나의 문제를 해결하고 싶습니다.

    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

    위의 코드 것이다 this.height이 경우에없는 작업 (해당 사용자를 가정 할 수는 화면의 크기를 조정 및 내용은 동적)와 scrollTop () = 0 예 :

    window.height는 600 this.height 650 인

    600 - 650 = -50  

-50 / 2 = -25

    이제 상자가 -25 중심 오프 스크린됩니다.

  9. 9.이것은 안된이지만,이 같은 작업을해야합니다.

    이것은 안된이지만,이 같은 작업을해야합니다.

    var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

  10. 10.나는 당신이 항상 페이지의 중간에 중심 요소를 원하는 경우 최선을 것 절대 위치를 가진 것 같아요. 당신은 아마 고정 요소를 원한다. 나는 다른 JQuery와 중심 플러그인 사용되는 고정 위치를 발견했다. 그것은 고정 된 중심이라고합니다.

    나는 당신이 항상 페이지의 중간에 중심 요소를 원하는 경우 최선을 것 절대 위치를 가진 것 같아요. 당신은 아마 고정 요소를 원한다. 나는 다른 JQuery와 중심 플러그인 사용되는 고정 위치를 발견했다. 그것은 고정 된 중심이라고합니다.

  11. 11.이 기능의 전환 구성 요소는 크롬 (다른 곳에서 테스트하지 않았다)에 나를 위해 정말 가난했다. 나는 창에게 무리의 크기를 조정할 것입니다 내 요소는 따라 잡기 위해 노력하고, 주위를 천천히 닫게 종류의 것입니다.

    이 기능의 전환 구성 요소는 크롬 (다른 곳에서 테스트하지 않았다)에 나를 위해 정말 가난했다. 나는 창에게 무리의 크기를 조정할 것입니다 내 요소는 따라 잡기 위해 노력하고, 주위를 천천히 닫게 종류의 것입니다.

    부품 밖으로 그 다음 함수 주석 그래서. 또한, 나는 당신이 원하는 경우 예를 들어, 수평이 아닌 수직으로 만 센터, 선택 X & Y 논리 값에 전달하는 매개 변수를 추가 :

    // Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

  12. 12.브라우저의 표시 영역 (창)에 소자 상대적으로 중심 위치를 사용하지 않는다 : 절대 정확한 위치 값 (절대 수단 "요소가 처음 위치 (고정되지 않은) 상위 요소 상대 위치")에 고정되어야 .

    브라우저의 표시 영역 (창)에 소자 상대적으로 중심 위치를 사용하지 않는다 : 절대 정확한 위치 값 (절대 수단 "요소가 처음 위치 (고정되지 않은) 상위 요소 상대 위치")에 고정되어야 .

    대신 "픽셀"의 "%"사용 플러그인 제안 센터의이 대체 버전은 그래서 당신은 내용 유지를 중심으로 창 크기를 조정할 때 :

    $.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

    (여백을 가진 것은 이해되지 않는다, 우리는 고정 된 위치를 사용하고 있기 때문에) 너비 / 높이에서 콘텐츠 여백을 제외 0 : 당신은 마진을 넣어해야합니다. 여백을 포함해야한다 (참) .outerWidth를 사용하여 JQuery와 문서에 따르면,하지만 난 크롬에서 시도 할 때 예상대로 작동하지 않았다.

    50 * (1 비)에서 유래 :

    윈도우 폭 : W = 100 %

    (%)에 소자 폭 : = 100 * elementWidthInPixels / w windowWidthInPixels

    그들은 중심 왼쪽을 계산합니다 :

     left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

  13. 13.이 중대하다. 나는 콜백 함수를 추가

    이 중대하다. 나는 콜백 함수를 추가

    center: function (options, callback) {


    if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

  14. 14.문제는 나에게 아무것도 가르쳐 경우이있다 : 이미 작동 뭔가를 변경하지 마십시오 :)

    문제는 나에게 아무것도 가르쳐 경우이있다 : 이미 작동 뭔가를 변경하지 마십시오 :)

    나는이가 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html에서 처리 된 방법의 (거의) 그대로 복사 제공하고 있습니다 - 그것은 크게 IE에 대한 해킹 것을하지만, 순수한 CSS의 방법을 제공합니다 질문에 대답 :

    .container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

    바이올린 : http://jsfiddle.net/S9upd/4/

    나는 browsershots 통해 실행했는데 그것을 잘 보인다; 아무것도, 나는 그렇게 아래의 원본을하겠습니다 경우 CSS 사양에 의해 결정으로 그 마진 비율 처리는 하루의 빛을보고있다.

    외모는 내가 파티에 늦었 좋아!

    그 위의 몇 가지 의견이는 CSS 질문입니다 제안이 있습니다 - 관심과 모두의 분리. 나 CSS 정말이 일에 발에서 자신을 촬영 한 것을 말함으로써이 서문 보자. 나는이 작업을 수행하는 것이 얼마나 쉬운 의미 :

    .container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

    권리? 컨테이너의 왼쪽 상단 모서리가 화면의 중앙에있을 것입니다, 음의 여백 내용은 마술 페이지의 절대 중심에 다시 나타납니다! http://jsfiddle.net/rJPPc/

    잘못된! 수평 위치는 OK이지만, 수직 ... 아, 참조하십시오. %의 위쪽 여백을 설정할 때 명백하게 CSS에서, 값이 포함 된 블록의 폭 항상 상대 백분율로 계산된다. 사과와 오렌지처럼! 당신이 나 또는 모질라 DOCO을 신뢰하지 않는 경우 콘텐츠 폭을 조정하고 놀랄하여 위의 바이올린과 놀이가있다.

    포기에 대해 이제 CSS 내 빵과 버터 인으로, 나는하지 않았다. 나는 체코 CSS 전문가의 연구 결과를 빌려 작업 바이올린에 그것을했습니다 있도록 동시에, 나는 쉬운 것을 선호합니다. 긴 이야기를 짧게, 우리는 수직 정렬이 중간에 설정되어있는 테이블을 만들 :

    <table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

    그리고 컨텐츠의 위치보다 미세 조정 그리운 여백입니다 : 0 자동 ;:

    .super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

    약속으로 바이올린을 사용 : http://jsfiddle.net/teDQ2/

  15. 15.내가 여기에있는 것은 당신이 센터를 시도하는 보장 요소뿐만 아니라의 "고정"또는 "절대"위치입니다있는 "센터"방법이지만 그것은 또한 당신이 중심되는 요소가,이 센터는 부모보다 작은 것을 보장 부모 요소가 상대적인 상기 부모 요소가 요소 자체보다 작은 경우, 그것은 상대적으로 그 다음 부모 DOM, 및 센터를 약탈한다.

    내가 여기에있는 것은 당신이 센터를 시도하는 보장 요소뿐만 아니라의 "고정"또는 "절대"위치입니다있는 "센터"방법이지만 그것은 또한 당신이 중심되는 요소가,이 센터는 부모보다 작은 것을 보장 부모 요소가 상대적인 상기 부모 요소가 요소 자체보다 작은 경우, 그것은 상대적으로 그 다음 부모 DOM, 및 센터를 약탈한다.

    $.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

  16. 16.내가 이것을 사용 :

    내가 이것을 사용 :

    $(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

  17. 17.이것을 사용하십시오 :

    이것을 사용하십시오 :

    $(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

  18. 18.당신은 요소의 위치 문서를 스크롤 할 때마다 시간을 조정하고 있기 때문에 당신은 가난한 전환을 받고 있습니다. 당신이 원하는 것은 고정 된 위치를 사용하는 것입니다. 위에 열거하고 멋지게 문제를 해결해야 할 것 같다 플러그인 그 고정 센터를했습니다. 고정 위치는 한 번 요소의 중심을 허용하고 CSS 속성은 당신을 위해 스크롤 할 때마다 그 위치를 유지 처리됩니다.

    당신은 요소의 위치 문서를 스크롤 할 때마다 시간을 조정하고 있기 때문에 당신은 가난한 전환을 받고 있습니다. 당신이 원하는 것은 고정 된 위치를 사용하는 것입니다. 위에 열거하고 멋지게 문제를 해결해야 할 것 같다 플러그인 그 고정 센터를했습니다. 고정 위치는 한 번 요소의 중심을 허용하고 CSS 속성은 당신을 위해 스크롤 할 때마다 그 위치를 유지 처리됩니다.

  19. 19.여기 내 버전입니다. 나는이 예제를 살펴 후 나는 그것을 변경 될 수 있습니다.

    여기 내 버전입니다. 나는이 예제를 살펴 후 나는 그것을 변경 될 수 있습니다.

    $.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

  20. 20.이것에 대한 필요를 JQuery와 없습니다

    이것에 대한 필요를 JQuery와 없습니다

    나는 DIV 요소의 중심이를 사용했다. CSS는 스타일,

    .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

    열기 요소

    $(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

  21. 21.MY UPDATE 토니 L' S의 답변 이것은 내가 지금 종교적으로 사용하는 것이 그의 대답의 modded하게 된 버전입니다. 나는 서로 다른 위치의 유형 또는 단지 모두보다는 수평 / 수직 중심을 원하는 등 당신이 가진 수있는 다양한 상황에 대한이 약간 더 많은 기능을 추가로 내가 그것을 공유하는 것이라고 생각.

    MY UPDATE 토니 L' S의 답변 이것은 내가 지금 종교적으로 사용하는 것이 그의 대답의 modded하게 된 버전입니다. 나는 서로 다른 위치의 유형 또는 단지 모두보다는 수평 / 수직 중심을 원하는 등 당신이 가진 수있는 다양한 상황에 대한이 약간 더 많은 기능을 추가로 내가 그것을 공유하는 것이라고 생각.

    center.js :

    // We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

    내 <헤드>에서 :

    <script src="scripts/center.js"></script>

    사용의 예 :

    $("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

    그것은 어떤 위치 유형으로 작동하고, 사용자가 만든 다른 사이트에 쉽게 전체 사이트를 통해뿐만 아니라 쉽게 휴대 할 수 있습니다. 제대로 뭔가를 중심에 더 이상 성가신 해결 방법이 없습니다.

    이 거기에서 누군가를 위해 유용 희망! 즐겨.

  22. 22.롯은이 작업을 수행하는 방법이다. 그 위치는 BODY에 상대적 그래서 바로 BODY 태그 내부 없음 : 내 객체가 표시 숨겨진 유지됩니다. ( "#는 것으로, object_id") $을 사용한 후. 쇼 (), 나는 $ 전화 ( "# OBJECT_ID"). 센터 ()

    롯은이 작업을 수행하는 방법이다. 그 위치는 BODY에 상대적 그래서 바로 BODY 태그 내부 없음 : 내 객체가 표시 숨겨진 유지됩니다. ( "#는 것으로, object_id") $을 사용한 후. 쇼 (), 나는 $ 전화 ( "# OBJECT_ID"). 센터 ()

    I는 위치 사용은 모달 창 위치가 고정 된 경우 모달 콘텐츠의 일부가 액세스 될 수있는 경우에 장치 창보다 큰 것으로, 특히 소형 휴대 기기 가능 절대 때문이다.

    여기 내 맛의 다른 답변 내 특정 요구에 따라입니다 :

    $.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

  23. 23.당신은 CSS 변환 속성을 사용할 수 있습니다 :

    당신은 CSS 변환 속성을 사용할 수 있습니다 :

    position: absolute;
transform: translate(-50%, -50%);

    자세한 내용은이 게시물을 읽어보십시오.

  24. 24.일반적으로, 난 단지 CSS와 함께이 작업을 수행 할 것입니다 ...하지만 당신은 당신이 jQuery를 함께 할 수있는 방법을 요구하기 때문에 ...

    일반적으로, 난 단지 CSS와 함께이 작업을 수행 할 것입니다 ...하지만 당신은 당신이 jQuery를 함께 할 수있는 방법을 요구하기 때문에 ...

    다음 코드는 컨테이너 내부에 수평 및 수직 사업부를 중심으로 :

    $ ( "# 대상"). addClass ( "중심의 컨텐츠") .wrap ( "

    ") .wrap ( "
    "); 몸 { 여백 : 0; 배경 : #ccc; } .center-외부 용기 { 위치 : 절대; 표시 : 테이블; 폭 : 100 %; 신장 : 100 %; } .center-내부 컨테이너 { 표시 : 테이블 셀; 수직 정렬 : 중간; 텍스트 정렬 : 센터; } .centered 콘텐츠 { 표시 : 인라인 블록; 텍스트 정렬은 : 왼쪽; 배경 : #fff; 패딩 : 20 픽셀; 국경 : 1 픽셀의 고체 # 000; } <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "https://code.jquery.com/jquery-1.12.1.min.js">
    센터이!

    (이 바이올린 참조)

  25. 25.그냥 말해: $ ( "# divId는") HTML ($ ( '') HTML ($ ( "# divId는") HTML ())..).;

    그냥 말해: $ ( "# divId는") HTML ($ ( '') HTML ($ ( "# divId는") HTML ())..).;

  26. 26.CSS 솔루션 에서 두 줄 만

    CSS 솔루션 에서 두 줄 만

    그것은 수평 및 수직 내면의 사업부를 중앙 집중화.

    #outer{
  display: flex;
}
#inner{
  margin: auto;
}

    단지 수평 정렬 변화

    margin: 0 auto;

    수직, 변화를위한

    margin: auto 0;

  27. 27.그것은 단지 CSS로 수행 할 수 있습니다. 그러나 그들은 jQuery를 또는 자바 스크립트 요청

    그것은 단지 CSS로 수행 할 수 있습니다. 그러나 그들은 jQuery를 또는 자바 스크립트 요청

    여기서, 사업부 센터를 정렬 CSS 플렉스 상자 속성을 사용합니다.

    body.center{
  display:flex;
  align-items:center; // Vertical alignment
  justify-content:center; // Horizontal alignment
}

    document.querySelector ( '신체') classList.add ( "중앙").; 몸 { 여백 : 0; 높이 : 100vh; 폭 : 100 %; 배경 : #ccc; } #본관{ 배경 : # 00CC00; 폭 : 100 픽셀; 높이 : 100 픽셀; } body.center { 표시 : 플렉스; 정렬-항목 : 센터; 정당화 - 내용 : 센터; }

  28. 28.왜 사업부를 중심으로 위해 CSS를 사용하지 않는?

    왜 사업부를 중심으로 위해 CSS를 사용하지 않는?

    #timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}

    29. from https://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 이미지가 jQuery를 함께 (오류)를로드하지 않은 경우 확인  (0) 2020.09.24
[JQUERY] ) ($ .when에 Deferreds의 배열에 전달  (0) 2020.09.24
[JQUERY] jQuery를 사용하여 드롭 다운 목록 (선택 상자)에서 선택한 텍스트를 가져옵니다  (0) 2020.09.24
[JQUERY] 숫자의 배열의 합을 찾는 방법  (0) 2020.09.24
[JQUERY] jQuery를 이벤트 키 누르기 : 어떤 키를 눌렀는지?  (0) 2020.09.24
,

티스토리툴바