Div不會中心在屏幕上，除非我指定高度

Question

我使用以下jquery代碼中心div在頁面上，問題是它無法正常工作，除非我在CSS中指定div的高度，問題與這是該div應該由其內容調整大小。如果我在CSS中設置height：auto，我仍然會遇到問題，但是如果我將height設置爲300px，那麼它會將div放在頁面上。

我這裏有一個問題的的jsfiddle： http://jsfiddle.net/Vjvyz/

jQuery的

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

添加display:table-cell

.container {width:300px; background:#eee; display:table-cell} 

DEMO

Answer 2

使用此代碼的不同的瀏覽器工作。

(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();

Answer 3

，如果你有你的容器的靜態高度和寬度，你可以只用CSS做。比你可以使用下面的代碼：在你的代碼

.container{ 
    width:300px; 
    background:#eee; 
    height:300px; 
    position:absolutel 
    left:50%; 
    top:50%; 
    margin-left:-150px; /* 50% of your width with the - */ 
    margin-top:-150px; /* 50% of your height with the - */ 
} 

你有

<div class="container"></div><div class='container'> 

改變，爲：

<div class='container'> 

解決了這個問題。

Answer 4

可能是它是一個有點哈克，但你可以嘗試與利潤的工作：

.container {margin-top:-25%;width:300px; background:#eee; height:inherit;position:relative;}