垂直居中不工作在Firefox中

它可以在Safari和Chrome，但不是Firefox瀏覽器。我看了這個帖子：CSS vertical-align: middle not working但我寧願不使用表格。

我的CSS：

.wrapper { 
    height: 100%; 
    max-width: 420px; 
} 
.wrapper:before, 
.container { 
    display: inline-block; 
    vertical-align: middle; 
} 
.wrapper:before { 
    content: ''; 
    display: inline-block; 
    width: 0; 
    height: 100%; 
    vertical-align: middle; 
    margin-left: -0.25em; 
} 
.container { 
    text-align: justify; 
    font-size: 12px; 
}

來源

2014-11-04 REELHERO

下可能做的伎倆;-)

.container { 
position: relative; 
top: 50%; 
transform: translateY(-50%); 
}

哪裏.container是要垂直居中什麼。

來源

2014-11-04 01:49:33 Chris

它確實，但然後不safari http://danacoleproducer.com/index_test1.html和奇怪的動畫在safari中不起作用 - – REELHERO 2014-11-04 01:58:43

我不知道在safari中的動畫，對不起。首先嚐試從錯誤中清除代碼以檢查它是否有效。 – Chris 2014-11-04 02:07:49

您可能想在使用Safari瀏覽器之前使用條件註釋作爲代碼，但不使用Firefox，反之亦然。關於它的壞處，你不能在外部的css文件中使用它們。 – Chris 2014-11-04 02:12:48

垂直居中不工作在Firefox中

回答

相關問題