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

。