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;
}