“显示：内联块”技巧在 Firefox 中不起作用

Question

我要创建的是一个整页网站（无滚动条），其中包含垂直和水平居中的文本/图像/div 块。我研究并使用了一种技术，使用 100% 高度 div 和 0px 宽度，然后使用内容 div 垂直居中内容。在 safari 中完美运行，在 firefox 中完全不适用（在两种浏览器中都可以水平运行。）下面用于此的代码块...

html-

body

<div class="block">
  <div class="centered">
    ... content and images
  </div>
</div>

css-

html, body {height: 100%;}

.block {
background: url(images/bgimage.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
min-height: 100%;
margin: 0px;
}

.block:before {
content: '';
display: inline-block;
height: 100%; 
vertical-align: middle;
padding: 0px;
margin: 0px;
}

.centered {
display: inline-block;
vertical-align: middle;
padding:0px;
margin: 0px;
text-align: center;
*display:inline;
}

是否有一些等效于“显示：内联块”的东西我可以用于 Firefox？我不能使用 'float:left' 因为它不会垂直居中内容 div，并搞砸内联块语句。

欢迎大家帮忙

• 干杯

Answer 1

只需将下面的 css 规则添加到具有内联样式的元素中，它应该可以修复它：

display: -moz-inline-stack;

Answer 2

这是一个在兼容浏览器中垂直和水平居中的工作代码：

Demo

html, body {
    height: 100%;
    margin: 0;
}
.block {
    height: 100%;
    text-align: center;
}
.block:after, .centered {
    display: inline-block;
    vertical-align: middle;
}
.block:after {
    content: '';
    height: 100%; 
}

基于Centering in the unknown。