css - 如何在固定父级中居中相对层？

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>

如何在上面的代码中居中内层？CSS 在 FF 和 IE 中有效，但在 Chrome 和 Safari 中无效。 http://jsfiddle.net/HVHxq/

Answer 1

您需要absolute在 #mbFrame 上使用定位，而不是relative.

示例：http: //jsfiddle.net/HVHxq/16/