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

图片

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

Answer 1

如果父级为 layout="row".

，IE 无法将元素居中

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

如果你希望 "title" 和 "progress" 都像在 jsfiddle 中一样居中，你应该对 "loader" 使用 layout="column" 而对 [=35= 没有绝对定位]:

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-fill 参数会节省一些工作，您不需要灵活处理许多元素并使用许多布局设置：https://jsfiddle.net/suunyz3e/224/

Internet Explorer 中的居中对齐偏移

Center Center align in Internet Explorer is offset

html

css

angularjs

material-design

angular-material