Question

我使用以下代码在另一个div中垂直居中div：

 var heightf = $('.cx1').height();
 var heightg = $('.cx2').height();
 heighth = (heightf - heightg) / 2;
 if (heighth > 0) {
    $('.cx2').css({ "marginTop": heighth });
 }

我在文档就绪包装器和窗口调整大小包装器中有这个，这样当屏幕大小改变时，图像保持居中（响应）。

这似乎适用于所有浏览器，但是当我在Chrome和Kindle Fire上刷新时，div会被推到底部而不是留在中心。

任何人都可以解释原因吗？

Answer 1

我没有看到您拥有的所有代码，因此我无法分辨为什么它会在Chrome中执行此操作（因为我的代码没有这样做）。

你可能有两个div的“崩溃边际”。您可以向外部div添加padding: 1px 0，以便垂直边距不会折叠。

我认为您使用窗口调整大小处理程序，因为您的外部div与窗口的大小相关联？所以我在下面的代码中使它与窗口的高度相同。

此代码适用于Mac上的Chrome：

<!DOCTYPE html>

<style>
    body { margin: 0; }
    .wrapper { position: fixed; width: 100%; height: 100%;}
    .cx1 { background: dodgerblue; height: 100%; width: 300px; padding: 1px 0; }
    .cx2 { background: #ffc; height: 256px; width: 200px;}

</style>


<div class="wrapper">
    <div class="cx1">
        <div class="cx2">
            hello
        </div>
    </div>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>

    function verticallyCenter() {
        var heightf = $('.cx1').height();
        var heightg = $('.cx2').height();
        heighth = (heightf - heightg) / 2;
        if (heighth > 0) {
            $('.cx2').css({ "marginTop": heighth });
        }
    }

    $(verticallyCenter);

    $(window).resize(verticallyCenter);

</script>

以刷新为中心垂直中断

1 个答案: