Question

我正在jQuery中编写一个函数来垂直居中一个元素。我有负载运行... 代码如下：

JQuery的

var $window_height;
function Centerize(content) {
    content.css('margin-top', (($window_height - content.height())/2))
};

$(function(){
    $window_height = $(window).height();
    Centerize($('#welcome'));

    $(window).on('resize',function(){
        $window_height = $(window).height();
        Centerize($('#welcome'));
        });
})

问题是，无论如何调整大小，我的div高度神奇地变得不同（60px更短）。意思是，它第一次加载时，它居中。在调整大小时，高度较小，因此margin-top变大，整个div被按下。

我已经在$（'＃welcome'）。height（）。

上使用控制台日志进行了检查

原始值为432px。调整大小后，该值变为361px，即使在我最大化Chrome后，它仍然保持该值。有什么想法吗？

SCSS ：

#welcome {
    margin: 0 auto;
    background-color: #DB9E36;
    border-radius: 30px;
    width: 800px;
    padding: 30px 50px;
    text-align: center;

    div {
        margin: 50px auto;
        background-color: #FFE34E;
        width: 300px;
        height: 50px;
        border-radius: 5px;
        a {
            display: inline-block;
            text-decoration: none;
            font-family: 'Quicksand', sans-serif;
            font-weight: bold;
            color: #FFFAD5;
            background-color: #BD4932;
            width: 100px;
            margin: 10px 10px;
            padding: 5px 0;
        }
    }
}

Answer 1

我猜这与你的#welcome div中的图片有关。尝试更换：

$(function(){
    $window_height = ...

与

$(window).on('load', function () {
   $window_height = ...

应该让图像有时间完全加载。

Answer 2

首先，你是否绝对需要使用jQuery / JavaScript来实现垂直中心？使用top: 50%; margin-top:-100px方法可以很容易地通过CSS实现，其中“100”将是内容高度的一半。演示：http://jsfiddle.net/lasha/dGcsB/

如果您想使用jQuery，您可以动态应用类似的CSS，就像您尝试使用代码实现的那样。演示：http://jsfiddle.net/lasha/dGcsB/1/

作为额外的好处，您可以应用类似的技术将元素置于父容器中，该容器的高度会动态变化：http://jsfiddle.net/lasha/dGcsB/2/

享受代码示例。：）

编辑：哦，并简要说明导致高度事件发生的原因，例如，在Chrome中，在DOM计算完最终尺寸之前就会触发“就绪”事件每个元素，所以当你试图在加载时获得元素的高度或宽度时，浏览器可能没有最多的信息。到目前为止，这更像是Chrome的一部分，Firefox通常不会出现这个问题。

Answer 3

您是否尝试过设置welcome元素的高度？调整浏览器大小可能会调整该元素的大小，因为它的高度未定义。

#welcome {
    margin: 0 auto;
    background-color: #DB9E36;
    border-radius: 30px;
    width: 800px;
    padding: 30px 50px;
    text-align: center;
    height:200px;
    ...

至少看看这对你所看到的行为是否有任何影响

div .height（）在调整大小后没有告诉它

3 个答案: