垂直居中内容 jQuery 和 FireFox答案

【问题标题】：Vertical Center Content jQuery and FireFox垂直居中内容 jQuery 和 FireFox
【发布时间】：2015-04-01 13:03:53
【问题描述】：

我有一个将 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});
}

【问题讨论】：

顺便说一句，如果您在不同的事件上调用 centerContent，您可以在 jquery 中一次性绑定它们。 $(window).on("加载调整大小", function(){ centerContent(); });
而且您应该能够在几乎所有浏览器中仅使用 css 将某些内容居中和垂直对齐。
也许如果您将代码放在 jsfiddle 中，社区可以提供帮助（包括我自己）。 jsfiddle.net
lharby 是对的，当我需要这样做时，我基本上将容器设置为 display:table-cell 并有一个 vertical-align:middle; 所以子块只需要 margin:auto; 用于水平对齐。
非常感谢您的帮助。我能够通过更改 code var height = $(document).height(); 来实现我想要的。 codeto var height = $(window).height()。这是我最终想要实现的目标，但它是通过蛮力完成的。jsfiddle.net/gz9m771p/3

标签： jquery html css center vertical-alignment

【解决方案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>

【讨论】：