Question

我使用以下jquery代码将div放在页面上，问题是它不起作用，除非我在css中指定div的高度，这个问题是div应该调整大小里面的内容。如果我在css中设置高度：auto我仍然会遇到问题，但如果我把高度：300px例如它将div放在页面中心那么。

我在这里有一个问题的方法： 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

使用此代码可在浏览器中使用。

(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 2

添加display:table-cell

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

<强> DEMO

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

可能有点hacky，但你可以尝试使用边距：

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

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

4 个答案: