在 IE 10 中使用 ms-box 垂直居中文本

Question

这是一个在框中垂直居中文本的mixin

@mixin box-center(){
/* Firefox */
  display:-moz-box;
  -moz-box-orient:horizontal;
  -moz-box-pack:center;
  -moz-box-align:center;

/* Safari and Chrome */
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  /* IE10 -Doesn't work! */
  display: -ms-box;
  -ms-box-orient:horizontal;
  -ms-box-pack:center;
  -ms-box-align:center;
}

这在 Chrome 和 Firefox 中完美运行。

当然，它在 IE 10 中不能正常工作（我还没有在旧版本的 IE 中测试过）。文本保持在顶部。

这是jsfiddle

我错过了什么吗？

Answer 1

这对我在 IE 10 上运行良好。这是fiddle 截图：http://img189.imageshack.us/img189/9135/eae7aabb6f494aeb8410553.png

display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-pack: center;
-ms-box-orient:horizontal;

Answer 2

IE10 没有实施 2009 年的 Flexbox 规范，它实施了 2012 年 3 月的草案。

这应该是你需要的：

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-flex-line-pack: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

我确实有一组用于 Flexbox 的 Sass mixin，可以为您正确处理所有前缀，您现在可以免费使用：https://gist.github.com/cimmanon/4461470。它们已提交给 Compass 项目，应该会在下一个版本中提供。