垂直居中的100％高度的div無法在Firefox

到達頂部下面是代碼垂直居中的100％高度的div無法在Firefox

<style> 
.test{ 
    position:absolute; 
    width:100px; 
    height:100%; 
    top:50%; 
    transform:translateY(-50%); 
    background:blue; 
} 
</style> 
<div class="test"></div>

這裏是什麼樣子的畫面。我在Chrome和IE中測試了這個，並且沒有出現差距。

的間隙保持，如果我將高度設置爲100%100vh或以像素爲單位的絕對高度。我正在使用Firefox 40，因此瀏覽器是最新的。

此外，對於任何人想知道爲什麼你會中心一個高度爲100％的div，這是它的中心，無論屏幕的方向。

編輯
對於那些提示設置margin:0它遺憾的是不解決問題

澄清這個問題。

顯然這是渲染引擎中的四捨五入錯誤。因爲如果你改變窗口的高度，間隙就會出現並消失。 Chrome似乎顯示出一點小差距，但幾乎沒有區別。要查看該問題，請嘗試更改此小提琴的框架高度http://jsfiddle.net/m4yqoq4w/。我認爲這也意味着沒有簡單的方法來解決這個問題。

來源

2015-09-04 qw3n

體內沒有邊距和填充物嗎？ – Roope

主要是因爲身體的邊緣或填充。在iframe中查看你的代碼：http://jsfiddle.net/m4yqoq4w/ –

但絕對位置不應該忽略身體邊緣？ – qw3n

添加margin:0;對身體

前：http://jsfiddle.net/m4yqoq4w/ 後：http://jsfiddle.net/2umLokj4/

來源

2015-09-04 12:39:49

這將解決這個問題：

body{ 
    margin: 0; 
}

來源

2015-09-04 12:47:06

如果減少爲下面的「頂」的屬性值，你會永遠得不到空隙

top:49%;

來源

2015-09-04 12:47:11 Aparna

垂直居中的100％高度的div無法在Firefox

回答

相關問題