将固定父级内的相对层居中

Question

HTML：

<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风格：

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

我如何将内层居中？这个CSS适用于FF和IE，但不适用于Chrome和Safari。 http://jsfiddle.net/HVHxq/

Answer 1

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

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