使用绝对位置和顶部％以及窗口高度小的模态div离开屏幕

Question

我有一个模态div：

<div class = "modal"></div>

CSS：

.modal {
  position: absolute;
  left: 50%;
  margin-left: -325px; /* centered horizontally */
  top: 48%; 
  margin-top: -250px; /* centered (almost) vertically */
  width: 650px;
  height: 500px;
  background-color: white;
}

问题是，如果浏览器窗口的高度太小，div会从顶部的屏幕上移开。您可以向下滚动并查看其余部分，但顶部位开始隐藏。

如果浏览器窗口是某个高度，有没有将％设置为px？或者也许有更好的解决方案。