'top' CSS 属性不适用于 100vh

Question

我正在尝试构建一个只有 css 的简单单页网站，作为练习以熟悉 css。

我将三张背景图片叠加在一起。每个图像的高度都设置为 100vh。这使每个图像看起来都不错，但我尝试使用 'top' 属性将文本放在页面中间，文本没有移动。

有人能告诉我为什么 'top' 在这种情况下不起作用吗？以及绕过它的方法？

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>

Answer 1

添加Position:relative;

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

Answer 2

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;
}

Answer 3

top、right、bottom 和 left 属性指定定位元素的位置。通过这个 link：https://developer.mozilla.org/en/docs/Web/CSS/position

'top' CSS 属性不适用于 100vh

The 'top' CSS attribute does not apply with 100vh

html

css

viewport-units