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

} 

然後，我有<div />與<h1 />在這樣的：

<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一個寬度，你會看到。