中心中心在Internet Explorer對齊偏移

Question

我是新來角材料設計（https://material.angularjs.org/latest/），並有一些麻煩的加載條div將Internet Explorer的內水平和垂直方向中心（在Chrome/FF工作正常）。

我已經詳細瞭解了已知的柔性盒問題，並且似乎無法找到此問題的解決方法。

的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：如果只有一個垂直居中的元素或類似的東西存在問題，我也遇到同樣的問題。

如果你想同時「標題」和「進步」到的jsfiddle居中一樣，你應該使用layout="column"爲「加載」和「稱號」沒有絕對的定位：

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：也有w ^很多多餘的屬性。

EDIT_03：使用layout-fill論證會節省一些工作，你不需要彎曲成許多元素和使用曼尼佈局設置：https://jsfiddle.net/suunyz3e/224/