'top'CSS屬性不適用於100vh

我正在嘗試構建一個只有css的簡單單頁網站作爲練習來熟悉css。'top'CSS屬性不適用於100vh

我有三個背景圖像堆疊在一起。每個圖像設置爲100vh的高度。這給每個圖像一個很好的外觀，但我嘗試使用'頂部'屬性放置在頁面中間的文本，文本沒有移動。

有人能告訴我爲什麼'頂部'在這種情況下不起作用嗎？還有一種方法來解決它？

This is my CSS: 

#page1 { 
    background-size: cover; 
    background-image: url('Page1_f09078_f06078_1000_vertical.png'); 
    height: 100vh; 
    display: block; 
} 

#welcome { 
    text-align: center; 
    top: 50%;    <-- This attribute won't work 
} 

#page2 { 
    background-size: cover; 
    display: block; 
    background-image: url('Page2_f06078_ffa860_1000_vertical.png'); 
    height: 100vh; 
} 

#page3 { 
    background-size: cover; 
    display: block; 
    background-image: url('Page3_ffa860_f09078_1000_vertical.png'); 
    height: 100vh; 
}

這是我的html：

<html lang="en"> 
    <head> 
    <link href="SinglePage.css" rel="stylesheet"> 
    </head> 
    <body> 

     <div id="page1"> 

     <h2 id="welcome">Welcome!</h2> 


     </div> <!-- End of page1 --> 

     <div id="page2"> 
     </div> 

     <div id="page3"> 
     </div> 



    </body> 
</html>

來源

2016-06-28 user6509972

頂部，左'，右'和'底部'只適用於定位元素。 – blonfu

top，left，right和bottom CSS屬性與relative，absolute或fixed位置使用時，才起作用。

使用下面的CSS：

#page1 { 
    position: relative; 
} 

#welcome { 
    transform: translateY(-50%); 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    right: 0; 
    left: 0; 
}

來源

2016-06-28 06:35:26

添加位置：相對;

#welcome { 
    position: relative; 
    text-align: center; 
    top: 50%; 
}

來源

2016-06-28 06:33:44

的上，右，下和左屬性指定定位元素的位置。通過此鏈接：https://developer.mozilla.org/en/docs/Web/CSS/position

來源

2016-06-28 06:50:10 Aby

'top'CSS屬性不適用於100vh

回答

相關問題