垂直对齐浏览器窗口中的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 */
}

您可以使用许多技术，这取决于您想要如何实现它。