css - 垂直对齐 - IE10 Flex 框不工作

Question

除了 IE10 之外，我的中心对齐在所有支持它的浏览器中都能正常工作。我认为我的语法正确并且它确实支持它。有人能帮忙吗？ DEMO

html {
    height: 100%;
}
body {
    background: red;
    font-family: 'Open Sans';
    min-height: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -ms-flexbox;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
    text-align: center;
}
.box {
    background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #054B98;
    height: 620px;
    margin: 0 auto 20px;
    position: relative;
    width: 930px;
}

Answer 1

您有正确的显示值，但您使用的所有其他 Flexbox 属性都是错误的。正确的翻译应该是这样的:

body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

但是，如果您将 Flexbox 用于垂直对齐目的，这可能正是您所需要的:

body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;

  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

请注意，box-align 和 flex-align/align-items 是不等效的属性，但它们在这里执行相同的任务。