8

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

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;
}
4

2 回答 2

13

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

于 2013-06-06T12:32:05.073 回答
3

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

来自：Microsoft Connect - Min-height 和 flexbox (flex-direction:column) 在 IE 10 和 11-preview 中不能一起使用

在所有其他支持 flexbox 的浏览器中，flex-direction:column基于 flex 容器将支持容器min-height来计算flex-grow长度。在 IE10 和 11 预览版中，它似乎只适用于显式height值。

于 2016-09-28T23:47:54.523 回答