在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>