html - 在垂直对齐的 Div 上使用固定定位

Question

希望有一个简单的解决方案。基本上，我想做的是在浏览器的垂直中心放置一个 div (#hello)，并使用固定定位，这样它就不会在滚动时移动。到目前为止，这是我的 HTML:

<section id="home">
    <div id="home-container">
        <div id="hello"></div>
    </div>
</section>

还有 CSS:

#home {
    display: table;
    overflow: hidden;
    margin: 0px auto;
}

*:first-child+html #home {
    position: relative;
}

* html #home {
    position: relative;
}

#home-container {
    display: table-cell;
    vertical-align: middle;
}

*:first-child+html #home-container {
    position: absolute;
    top: 50%;
}

* html #home-container {
    position: absolute;top:50%;
}

*:first-child+html #hello {
    position: relative;
    top: -50%;
}

* html #hello {
    position: relative;
    top: -50%;
}

#home {
    height: 100%;
}

现在 div 在“主页”部分垂直居中，但在滚动时移动。我试过将 #home 和 #home-container 更改为固定定位，但它不起作用。

我已经搜索了很多，如果已经存在类似的线程，我深表歉意。希望有人能指出我正确的方向。提前致谢!

Answer 1

将 div 垂直对齐到具有固定位置的垂直中心的概念是添加 position:fixed 属性(指定偏移量)，然后将负边距放置在 div 高度一半的顶部。例如，假设 #hello 的高度为 100 像素:

    #hello {
      position:fixed;
      top:50%;
      margin-top:-50px;
    }

位置:固定； div 将相对于您的文档窗口。