垂直居中菜單偏移

Question

我嘗試使用下面的代碼來居中圖像：這裏發生了什麼的

top: 50%; 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%); 

例子：http://benjaminbrooksguitar.ipage.com/bishoprdp/

的問題是我有固定的菜單欄屏幕底部使圖像看起來不完全居中。 同樣在iOS Safari中，它看起來更不集中......（我的猜測是，因爲Safari瀏覽器的菜單欄在滾動時消失，瀏覽器正在計算錯誤）。

有沒有一種方法垂直居中圖像，考慮到菜單欄，以便圖像完美地位於瀏覽器的頂部和菜單欄之間？

還有iOS Safari的菜單欄變化問題的修復嗎？

下面是Chrome的截圖，並iOS的Safari瀏覽器的截圖（澄清，它只是看起來Safari瀏覽器的iOS版本這種極端）： http://benjaminbrooksguitar.ipage.com/bishoprdp/Screenshot2.jpg

非常感謝

附：我沒有足夠高的聲望來添加圖像，因此鏈接...

Answer 1

這是它在Linux的火狐v38 上的外觀的屏幕顯示。

對我來說似乎沒問題。

這就是它在Chromium上的樣子。