css – 垂直对齐 – IE10 Flex盒无法正常工作

我的中心对齐工作在除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,0.2);
    color: #054B98;
    height: 620px;
    margin: 0 auto 20px;
    position: relative;
    width: 930px;
}

解决方法

您具有正确的显示值,但您使用的所有其他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不是等效属性,但它们在此处执行相同的任务.