Question

I’m working on an overlay in CSS and ran into a cross browser issue. The overlay height should be 80% of the viewport and be centered vertically. (80% height on the element, -40% top margin, 50% from top positioned absolutely).

The fiddle below works in Chrome but not in Firefox.. the issue seems to be the percentage for margin-top. Make sure to resize your browser to see the full effect.

Fiddle: http://jsfiddle.net/DEn6r/1/

Thank you for helping!

Answer 1

Since you’re using percentages for both top and margin-top, you can combine them, and simply use top: 10%.

See this demo: http://jsfiddle.net/jackwanders/DEn6r/3/

Also, if you’d like to drop the negative left margin, you can use this trick to center the div horizontally:

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