垂直對齊一個div使用vh

我將我的包裝的高度設置爲100vh來填滿整個屏幕，然後在包裝器內我想要一個div設置爲50％ - 垂直在中間和使用位置：relative和set top /轉換（translateY）爲50％。它可以在我的臺式電腦上完美工作，但是當我的Macbook上顯示（都運行Chrome）時，它無法正確顯示，並且被「推」到屏幕高度的30％。我究竟做錯了什麼？這裏是我的代碼：垂直對齊一個div使用vh

#main-1 { 
    width: 100%; 
    height: 100vh; 
    background-image: linear-gradient(to right, #e1484f 50%, #f9f9f9 50%); 
} 
#info-left { 
    width: 20%; 
    height: 300px; 
    padding-left: 10%; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    float: left;  
    text-align: center; 
    color: #FFF; 
}

來源

2016-01-25 Andreas Eilertsen Lybo

凹凸不平，仍在尋找解決方案！ –

你可以設置你內心的div是這樣的：

top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%);

將水平和垂直居中的DIV。

不要忘記-webkit以獲得良好的跨瀏覽經驗。

來源

2016-01-25 14:44:43

這只是添加跨瀏覽器支持和水平對齊，這不是我想要的。正如我寫的，我想垂直對齊到中間，我的代碼正在我的臺式計算機上工作，但不是我的筆記本電腦 –

垂直對齊一個div使用vh

回答

相關問題