CSS保证金 - 百分比 - 跨浏览器问题

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