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/