Internet Explorer 中的中心对齐偏移

Question

我是 Angular Material Design (https://material.angularjs.org/latest/) 的新手，在使加载栏 div在 Internet Explorer 中 水平和垂直居中时遇到了一些问题（在 Chrome/FF 中运行良好）。

我已经仔细阅读了已知的 flexbox 问题，但似乎无法确定这个问题的解决方法。

JSFiddle：https://jsfiddle.net/aanders50/suunyz3e/223/

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

  <md-content class="loader" layout="row" layout-align="center center" flex>
    <div id="title" flex>
      <span>Loading...</span>
    </div>
    <div class="progress" flex>
      <div flex class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </md-content>

</main>

CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  max-width: 260px;
}

#title {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: black;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  margin-top: -72px;
  padding-left: 10px;
}

图片

我的目标是仅使用材料设计元素来完成大部分（如果不是全部）布局 - 如果您发现我使用错误，请随时指出！谢谢！

Answer 1

如果父级是layout="row"，IE 会出现居中元素的问题。

EDIT_01：如果只有一个元素垂直居中或类似的东西会有问题，我也有同样的问题。

如果您希望“title”和“progress”都像在 jsfiddle 中一样居中，您应该使用 layout="column" 来表示“loader”，而不要使用绝对定位来表示“title”：

HTML

<main ng-app="sandbox" flex layout="column" class="col-xs-12" id="view">

  <md-content class="loader" layout="column" layout-align="center center" flex>
    <div id="title">
      <span>Loading...</span>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      </div>
    </div>
  </md-content>

</main>

CSS

#view {
  height: 100%;
  width: 100%;
}

.progress {
  width: 100%;          -- to stretch it to 260px max
  max-width: 260px;
}

#title {
  color: black;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
  padding-left: 10px;
}

EDIT_02：还有很多多余的flex 属性。

EDIT_03：使用layout-fillargument 将节省一些工作，您不需要对许多元素进行调整并使用许多布局设置：https://jsfiddle.net/suunyz3e/224/