创建'dead center'作为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一个宽度，你会看到。