Question

#mbFrameHolder {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#mbFrame {
  position: relative;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-top: -150px;
  margin-left: -150px;
  background: #FFF;
}

<div id="mbFrameHolder">
  <div id="mbFrame">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum, dolor in tincidunt facilisis, nisl ligula cursus nibh, a rutrum sapien justo et lorem.
  </div>
</div>

How can I centre inner layer in the above code? The CSS is working in FF and IE but not in Chrome and Safari.
http://jsfiddle.net/HVHxq/

Answer 1

You need to use absolute positioning on #mbFrame, not relative.

Example: http://jsfiddle.net/HVHxq/16/