'데드 센터'를 jQuery 플러그인으로 생성 할 때의 문제

Question

저는 매우 단순한 jQuery 플러그인을 사용하여 엘리먼트의 위치를 ​​브라우저 창의 중앙 (수평 및 수직)으로 변경하기 만하고 있습니다. 흔히 이것을 '죽은 센터'라고합니다.

jQuery.fn.dead_center = function() { 

    var element; 

    element = this; 

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

} 

은 그 때 나는 이런 식으로 <h1 />와 <div /> 있습니다

끝에

<div class="dead_center"> 
    <h1>Foo and bars.</h1> 
</div> 

는,이처럼 내 '플러그인'을 호출

$(function() { 

    $('.dead_center').dead_center(); 

}); 

문제 $('.dead_center')는 점이다 y- 축 중심 만합니다. x 축이 아닙니다!

왜 이런 일이 발생합니까? 내 실수를 발견 할 수 없다.

어떤 조언을 주셔서 감사합니다!

Answer 1

div의 기본값은 너비 100 %입니다. (실제로는 auto이지만 블럭 레벨 요소에 대해서는 auto이 어떻게 작동하는지). 따라서 은 가로로 가운데에입니다. 그것은 단지 전체 수평 영역을 차지하고 있습니다. div 너비를 지정하면 알 수 있습니다.