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

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

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화면 중앙에 위치 합니다.

이것은 테스트되지 않았지만 이와 같은 것이 작동합니다.

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

페이지 중간에 요소가 항상 중앙에 오도록하려면 절대 위치를 사용하는 것이 가장 좋을 것이라고 생각하지 않습니다. 아마도 고정 요소가 필요할 것입니다. 고정 위치 지정을 사용하는 또 다른 jquery 센터링 플러그인을 찾았습니다. 이를 고정 중심 이라고 합니다.

이 기능의 전환 구성 요소는 Chrome에서 나에게 제대로 작동하지 않았습니다 (다른 곳에서는 테스트하지 않았습니다). 나는 창의 크기를 무리로 조정하고 내 요소는 천천히 따라 다니면서 잡으려고했습니다.

따라서 다음 함수는 그 부분을 주석 처리합니다. 또한 세로 및 가로가 아닌 가운데를 원한다면 선택적 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);

브라우저 뷰포트 (창)를 기준으로 요소를 가운데에 position: absolute배치하려면 올바른 위치 값을 사용해야합니다 fixed(절대 : "요소가 첫 번째 위치 (정적 아님) 상위 요소에 상대적으로 위치 함").

제안 된 센터 플러그인의이 대체 버전은 "px"대신 "%"를 사용하므로 창의 크기를 조정하면 컨텐츠가 중앙에 유지됩니다.

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

margin: 0너비 / 높이에서 내용 여백을 제외 해야합니다 (여백이 고정 된 위치를 사용하므로 여백이 의미가 없습니다). jQuery 문서에 따르면 사용에 .outerWidth(true)여백이 포함되어야하지만 Chrome에서 시도했을 때 예상대로 작동하지 않습니다.

의 50*(1-ratio)출처 :

창 너비 : W = 100%

요소 너비 (%) : w = 100 * elementWidthInPixels/windowWidthInPixels

중앙 왼쪽을 계산하는 것 :

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

대단하다. 콜백 함수를 추가했습니다

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

편집하다:

질문이 나에게 무엇인가를 가르쳐 준다면, 이것입니다 : 이미 작동하는 것을 바꾸지 마십시오 :)

나는 이것이 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/

잘못된! 가로 위치는 괜찮지 만 세로로 ... 오, 알겠습니다. 분명히 CSS에서 상단 여백을 %로 설정하면 값은 항상 포함 블록 의 너비 에 대한 백분율 로 계산됩니다. 사과와 오렌지처럼! 나나 모질라 도코를 믿지 않는다면, 콘텐츠 너비를 조정하여 위의 바이올린을 연주하고 놀라십시오.

이제 CSS가 빵과 버터가되어 버려서 포기하지 않았습니다. 동시에, 나는 쉬운 일을 선호하기 때문에 체코 CSS 전문가 의 발견을 빌려서 작동하는 바이올린으로 만들었습니다. 간단히 말해서, 수직 정렬이 중간으로 설정된 테이블을 만듭니다.

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

그리고 컨텐츠의 위치가 좋은 오래된 마진으로 미세 조정 된 것보다 : 0 auto; :

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

약속대로 바이올린 작업 : http://jsfiddle.net/teDQ2/

내가 여기에있는 것은 당신이 중심에 놓으려는 요소가 "고정 된"또는 "절대적인"포지셔닝뿐만 아니라 중심이되는 요소가 부모보다 작도록하는 "중심"방법입니다. 그리고 부모에 대한 요소는 부모입니다. 요소 부모가 요소 자체보다 작 으면 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');
        }
    };

나는 이것을 사용한다 :

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

이것을 사용하십시오 :

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

문서를 스크롤 할 때마다 요소의 위치를 ​​조정하기 때문에 전환이 제대로 이루어지지 않습니다. 원하는 것은 고정 위치 지정을 사용하는 것입니다. 위에 나열된 고정 센터 플러그인을 시도했는데 문제가 잘 해결되는 것 같습니다. 고정 위치 지정을 사용하면 요소를 한 번 중앙에 배치 할 수 있으며 CSS 속성은 스크롤 할 때마다 해당 위치를 유지 관리합니다.

여기 내 버전이 있습니다. 이 예제를 본 후 변경할 수 있습니다.

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

이것을 위해 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);
    });

});

TONY L' S ANSWER에 대한 나의 업데이트 이것은 내가 종교적으로 사용하는 그의 답변의 수정 된 버전입니다. 다양한 유형과 같은 다양한 상황에서 약간 더 많은 기능을 추가하므로 공유 할 것이라고 생각했습니다.position 두 가지가 아닌 가로 / 세로 중심을 원할 때 .

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

내 <head>:

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

사용 예 :

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

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

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

모든 포지셔닝 유형과 함께 작동하며 전체 사이트에서 쉽게 사용할 수있을뿐만 아니라 생성 한 다른 사이트로 쉽게 이동할 수 있습니다. 더 정확하게 무언가를 센터링하기위한 성가신 해결 방법이 없습니다.

이것이 누군가에게 유용하기를 바랍니다! 즐겨.

이 작업을 수행하는 많은 방법이 있습니다. 내 객체는 BODY 태그 내부에 display : none으로 숨겨져 배치는 BODY와 관련이 있습니다. 사용 후 ( "#는 것으로, object_id") $을. 쇼 () , I 호출 $를 ( "# OBJECT_ID"). 센터 ()

나는 위치를 사용 한다 : 절대 합니다. 특히 소형 모바일 장치에서는 모달 창이 장치 창보다 클 수 있으므로 위치가 고정 된 경우 모달 내용 중 일부에 액세스 할 수 없습니다.

다음은 다른 사람의 답변과 특정 요구 사항을 기반으로 한 맛입니다.

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

CSS translate속성을 사용할 수 있습니다 :

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

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

일반적으로 CSS로만이 작업을 수행하지만 jQuery 로이 작업을 수행하는 방법을 요청했기 때문에 ...

다음 코드는 컨테이너 내부의 수평 및 수직 div를 중심으로합니다.

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");

body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

( 이 바이올린 참조 )

CSS 솔루션 두 줄로만

내부 div를 가로 및 세로로 중앙 집중화합니다.

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

}

수평 정렬의 경우에만 변경

margin: 0 auto;

수직, 변화

margin: auto 0;

다음과 같이 말하십시오 : $ ( "# divID"). html ($ ( ''). html ($ ( "# divID"). html ()));

왜 div를 중심에 CSS를 사용하지 않습니까?

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