css - CSS Margin-Top with Percentage -- 跨浏览器问题

Question

我正在处理 CSS 中的叠加层并遇到了跨浏览器问题。覆盖高度应为视口的 80% 并垂直居中。（元素的 80% 高度，-40% 上边距，50% 从顶部绝对定位）。

下面的小提琴适用于 Chrome，但不适用于 Firefox .. 问题似乎是 margin-top 的百分比。确保调整浏览器大小以查看完整效果。

小提琴：http: //jsfiddle.net/DEn6r/1/

感谢您的帮助！

Answer 1

由于您对top和都使用百分比margin-top，因此您可以将它们组合起来，然后简单地使用top: 10%.

看到这个演示：http: //jsfiddle.net/jackwanders/DEn6r/3/

此外，如果您想删除负左边距，您可以使用此技巧将 div 水平居中：

#inside {
  position: absolute;
  width: 300px;
  height: 80%;
  top: 10%;
  left: 0;
  right: 0;  // set left and right to 0
  margin: 0 auto; // set left and right margins to auto
  background: white;
}