创建 'dead center' 作为 jQuery 插件的问题答案

【问题标题】：Problems with creating 'dead center' as jQuery plugin创建 'dead center' 作为 jQuery 插件的问题
【发布时间】：2012-01-10 22:15:15
【问题描述】：

我正在开发非常非常简单的 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 轴！

为什么会这样？看不出我的错误。

感谢您的任何建议！

【问题讨论】：

标签： jquery plugins position center css-position

【解决方案1】：

div 的默认值为 100% 宽度。（实际上是auto，但这就是auto 对块级元素的作用）。因此，它水平居中。它只是占据了整个水平区域。给div 一个宽度，你会看到。

【讨论】：