jquery - 除非我指定高度，否则 Div 不会在屏幕上居中

Question

我正在使用以下 jquery 代码使页面上的 div 居中，问题是除非我在 css 中为 div 指定高度，否则它不起作用，问题是 div 应该按里面的内容。如果我在 css 中设置 height:auto 我仍然会遇到问题，但是如果我设置 height:300px 例如它会在页面上居中放置 div。

我这里有一个 jsfiddle 问题: http://jsfiddle.net/Vjvyz/

查询

var positionContent = function () {
    var width = $(window).width(); // the window width
    var height = $(window).height(); // the window height
    var containerwidth = $('.container').outerWidth(); // the container div width
    var containerheight = $('.container').outerHeight(); // the container div height
    if ((width >= containerwidth) && (height>=containerheight)){
        $('.container').css({position:'absolute',
            left: ($(window).width() - $('.container').outerWidth())/2,
            top: ($(window).height() - $('.container').outerHeight())/2 }); 
    } 
};
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);

HTML

<div class="container"></div>
<div class="container">
    <div class="logo"></div>
    <div class="menucontainer"></div>
    <div class="content">
        <p>Passion stands for the enthusiasm and fervour we put into everything we do in the company, and in developing the right organisational mix to help others in every possible way<br />
        we want every guest to experience that passion for life by having the most relaxing, blissful and luxurious stay possible, a time filled with personal discovery, recovery and spiritual fulfillment.</p>
        <p>We want every employee to taste that passion for life by growing in confidence and skills, and feeling part of a close-knit global family.</p>
    </div>
</div>

CSS

.container {width:300px; background:#eee; height:300px;}

Answer 1

使用此代码可跨浏览器工作。

(function($)
{
    $.fn.center = function()
    {
        var element = this;
        $(element).load(function()
        {
            changeCss();
            $(window).bind("resize", function()
            {
                changeCss();
            });
            function changeCss()
            {
                var imageHeight = $(element).height();
                var imageWidth = $(element).width();
                var windowWidth = $(window).width();
                var windowHeight = $(window).height();
                $(element).css({
                    "position" : "absolute",
                    "left" : windowWidth / 2 - imageWidth / 2,
                    "top" : windowHeight /2 - imageHeight / 2
                });
            };
        });
    };
})(jQuery);

然后将其用作 $('.container').center();