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是不是等效属性，但它们在此处执行相同的任务。

Answer 2

添加显式高度似乎是合适的解决方案。

来自：Microsoft Connect - Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview

在支持flexbox的所有其他浏览器中，基于flex-direction:column的Flex容器将使用容器min-height来计算flex-grow长度。在IE10＆amp; 11预览它似乎只能使用明确的height值。

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

2 个答案: