javascript - 如何在页面中央保留一个 div？

Question

我正在使用 jQuery 创建一个“对话框”，它应该在页面顶部和页面中心(垂直和水平)弹出。我应该如何让它保持在页面的中心(即使用户调整大小或滚动？)

Answer 1

我会用

position: fixed;
top: 50%;
left: 50%;
margin-left: -(dialogwidth/2);
margin-top: -(dialogheight/2);

但是使用此解决方案并且浏览器的视口(viewport)大小小于您的对话框，对话框的某些部分在顶部和左侧将无法访问，因为它们在视口(viewport)之外。因此，您必须决定它是否适合您的对话框大小。

(CSS 还不知道如何计算。所以你现在必须完成那里的小数学运算。因此你的对话框必须是固定大小，你必须知道。)

编辑:

哦，是的，如果你也想为 IE6 提供对话框，你应该这样做:

#dialog { position: absolute; }
#dialog[id] { position: fixed; }

由于 IE6 不支持固定位置，也不支持属性选择器，因此 IE6 将是唯一将位置设置为绝对的。 (这只会影响滚动行为。absolute 停留在其在页面中的位置，fixed 停留在其在浏览器中的位置。其余类似。)