'display：inline block'trick不能在firefox中工作

Question

我想创建的是一个整页网站（无滚动条），其中包含垂直和水平居中的文本/图像/ div的块。我研究并使用了一种技术，使用0px宽度的100％高度div，然后使用内容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; 
} 

是否有一些等同于“display：inline-block”我可以用于Firefox？我不能使用'float：left'，因为它不会垂直居中内容div，并将内联块语句拧紧。

所有帮助欢迎

• 干杯

Answer 1

只需添加下面与行内样式元素上的CSS规则，它应该修复它：

display: -moz-inline-stack; 

Answer 2

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

基于Centering in the unknownDemo

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%; 
} 

。