internet-explorer - 垂直和水平对齐具有相对大小的固定 div

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/