在IE9中没有固定高度/宽度的居中Div

Question

在我将这个该死的东西踢出去之前，我可以借用别人的眼睛吗？

SHORT VERSION什么是正确的方式来X，Y在IE9中可靠的中心，当它不能固定的高度/宽度？

场景：我正在自定义ping联邦服务器的模板，我们通过windows store应用进行身份验证。我提到这一点是因为Windows Store应用程序（不要与UWP混淆）使用一个jag版本的IE9。

我的问题...... ，我甚至不能去让codepen的，因为他们不支持IE9反正一个该死的....是我只是想垂直居中的第一个孩子div都和水平。

然后，IE9不支持flexbox，所以没有爱。然而，我能够做到;

position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 

这确实中心好听，看起来一切，除了IE伟大的，因为它会显示在屏幕底部的白色大的空间。这反过来也会导致滚动条出现，甚至没有必要...

由于div不能是一个固定的宽度/高度我没有得到其他修复工作。它也不能帮助我一直在做.NET的东西，只要我的CSS是生锈的。

那么有人可以开始我的周末吧，并启发我一些IE浏览器功夫修复，所以我可以称赞你的名字和敬酒啤酒给你今晚？ :)

希望以下（以IE为IE9 RAN）将帮助形象化了我的问题，在底部这个愚蠢的空白，已成为我的克星片断......

html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    background-image: url("https://static.pexels.com/photos/1350/blur-blurred-background.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: fixed; 
 
} 
 

 
div { 
 
    min-width: 250px; 
 
    min-height: 250px; 
 
    background: green; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div></div>

Answer 1

老办法是有一个额外的元素，但伪将为IE9做到：

html, body, body:before { 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
body:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    margin-left: -0.25em; 
 
    width: 0; 
 
    vertical-align: middle; 
 
} 
 

 
div { 
 
    min-width: 250px; 
 
    max-width: 99.5%; /* or white-space on body for security to avoid div wrap under pseudo, 
 
    do not forget to reset to normal if you choose so */ 
 
    min-height: 250px; 
 
    background: green; 
 
    display: inline-block; /* i'll be against top or left without disappearing if window is too small */ 
 
    vertical-align: middle; 
 
    /* text-align: left; */ 
 
    } 
 

 
/* not IE 9 , bg-cover ? */ 
 
body { 
 
    background-image: url("https://static.pexels.com/photos/1350/blur-blurred-background.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: fixed; 
 
}

<div></div>