Question

我问这个问题是因为它让我疯狂，因为它在Chrome浏览器上显示正确但在Firefox / IE中没有显示。

我想要一个div，它必须根据窗口垂直和水平对齐。它也有相对大小。你能帮我么？我试过这个，但它只适用于Chrome：

    #itemNewsFS {
       position:fixed;
       display:none;
       width: 50%;
       left: 50%; 
       margin-left: -25%;
       height: 80%;
       top: 50%;
       margin-top: -40%;
    }

谢谢！

Answer 1

边距（垂直和水平）相对于包含框的宽度计算，请阅读CSS2.1规范中的此摘录：little link。

要实现您的目标，您可以保留margin-left值，但是您必须使用JavaScript来修复margin-top：

document.getElementById("itemNewsFS").style.marginTop = Math.floor(window.innerHeight * 40 / 100) + "px";

Answer 2

尝试这样做：

<div class="block">
   <div id="itemNewsFS">
       Unknown stuff to be centered.
   </div>
</div>

.block {
    text-align: center;
    background: #c0c0c0;
    border: #a0a0a0 solid 1px;
    margin: 20px;
    height: 100%; /* Put your height here */
}

.block:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */

}

#itemNewsFS {
display: inline-block;
    vertical-align: middle;
    width: 300px;
    padding: 10px 15px;
    border: #a0a0a0 solid 1px;
    background: #f5f5f5;
}

来源：http://css-tricks.com/centering-in-the-unknown/

将垂直和水平对齐固定div与相对大小

2 个答案: