jquery - 垂直居中内容 jQuery 和 FireFox

Question

我有一个将 div 垂直居中的 jQuery 脚本。看起来它在所有浏览器中都在做，但在 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>