在浏览器窗口中垂直对齐Div（-not-在另一个元素中）

Question

我有一个div，我希望它始终垂直对齐到浏览器窗口高度的50％。

如果用户缩放此窗口，我不知道浏览器窗口的高度始终如何。如果将它放在另一个元素中是必要的，那很好，但是如上所述，我不知道视口在任何时候都有多高。

我也不打算使用javascript。

我已经阅读了网站，我已经去寻找解决方案，但我真的想把它扔出去（再次），因为我还没有找到一个解决方案来做到这一点，无论是通过钩子还是骗子。

感谢。

Answer 1

您没有指定是否有固定的高度？如果是这样，那么您可以使用一个元素执行此操作，只需添加以下示例CSS：

.centered {
  height: 100px;
  width: 100%;
  background: red;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -50px; /* half the height of the element */
}

您可以使用多种技术，具体取决于您希望如何实现它。一些（较旧的）但仍然相关的阅读here。