在 IE9 中居中 Div 而不固定 Height/Width

Question

在我把这个该死的东西踢出 window 之前，我能借用别人的眼睛吗？

简短版：在无法修复 height/width 时，在 IE9 中可靠地使 x,y 居中 div 的正确方法是什么？

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

我的问题...我什至不能为它做一个该死的 codepen 因为他们不支持 IE9 无论如何...我只是在尝试将第一个 child div 垂直和水平居中。

那么，IE9 不支持 flexbox，所以不喜欢那里。但是我能做到；

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

它确实很好地居中，在除 IE 之外的所有内容上看起来都很棒，因为它在屏幕底部显示一个大的白色 space。反过来，这也会导致出现甚至不需要的滚动条...

由于 div 无法修复 width/height 我还没有得到其他修复工作。它也无济于事我一直在做 .NET 的东西这么久我的 css 已经生锈了。

所以有人可以开始我的周末假期，教我一些 IE 功夫修复，这样我就可以称赞你的名字并在今晚为你干杯啤酒吗？ :)

希望下面的代码片段（运行在 IE 中为 IE9）将有助于想象我的问题，底部的这个愚蠢的白色space 已经成为我的克星...

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>

在 IE9 中居中 Div 而不固定 Height/Width

Centering Div in IE9 without fixed Height/Width

html

css

internet-explorer

internet-explorer-9

windows-store-apps