Question

我有一个jQuery脚本，它垂直居中div。它似乎在所有浏览器中都有效，但在FireFox中。当我刷新屏幕时，div按预期中心。

$(document).ready(function()
{
    centerContent();
});


$(window).load(function()
{
    centerContent();
});

$(window).resize(function()
{
    centerContent();
});

function centerContent()
{
    var height = $(document).height();
    var divHeight = $('#wrapper').height();
    var lNavHeight = $('#lNav').height();
    var diff = height/2 - divHeight/2;
    $('#wrapper').css({"position": "relative", "top": diff});
    $('#lNav').css({"position": "absolute", "bottom": 45});
    $('#rNav').css({"position": "absolute", "bottom": 45, "right": 5});
}

Answer 1

更好地使用这样的纯CSS解决方案（确保添加供应商前缀）：

body {
  margin: 0
}
#wrapper {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center
}
#content {
  flex: 1;
  text-align: center;
}

<div id="wrapper">
  <div id="content">CENTERED CONTENT</div>
</div>

垂直中心内容jQuery和FireFox

1 个答案: