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

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。