使用 jQuery 将 div 垂直和水平居中

我正在使用这个脚本将我的 div 水平和垂直居中。

当页面加载时，div 会垂直居中，而不是水平居中，直到我调整浏览器大小。

我究竟做错了什么？

$(document).ready(function (){
    $(window).resize(function (){
        $('.className').css({
            position:'absolute',
            left: ($(window).width() - $('.className').outerWidth())/2,
            top: ($(window).height() - $('.className').outerHeight())/2
        });
    });
    $(window).resize();
});

我通常使用这种“技术”：

$(function() {
    $('.className').css({
        'position' : 'absolute',
        'left' : '50%',
        'top' : '50%',
        'margin-left' : -$('.className').width()/2,
        'margin-top' : -$('.className').height()/2
    });
});

UPDATE:

我正在根据用户的建议更新解决方案Fred K https://stackoverflow.com/users/1252920/fred-k, using .outerWidth() http://api.jquery.com/outerwidth/ and .outerHeight() http://api.jquery.com/outerheight/以获得更精确的居中。

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

jQuery 文档中的一些附加注释（.outerWidth() http://api.jquery.com/outerwidth/, .outerHeight() http://api.jquery.com/outerheight/):

• 在某些情况下，与维度相关的 API（包括 .outerWidth()）返回的数字可能是小数。代码不应假定它是整数。此外，当用户缩放页面时，尺寸可能会不正确；浏览器不会公开 API 来检测这种情况。

• 当元素的父元素隐藏时，不保证 .outerWidth() 报告的值是准确的。为了获得准确的值，您应该在使用 .outerWidth() 之前先显示父级。

更新2：

一个简单的更新来展示如何使用this在 - 的里面css()方法，以防有更多具有相同的元素class具有不同尺寸的标签。

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