Zentrum Zentrum ausrichten in Internet Explorer versetzt

Question

Ich bin neu in Angular Material Design (https://material.angularjs.org/latest/) und einige Probleme mit einem Ladebalken immer div horizontal und vertikal im Internet Explorer zentriert werden (funktioniert in Chrome/FF).

Ich habe bereits durch die bekannten Flexbox-Probleme durchgelesen und kann nicht scheinen, diese zu beheben.

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

Bild

Mein Ziel ist es, die meisten, wenn nicht alle, meines Layouts nur mit Material Design-Elementen zu machen - wenn Sie bemerken, dass ich es falsch benutze, zögern Sie nicht, darauf hinzuweisen! Vielen Dank!

Answer 1

IE hat Probleme mit der Zentrierung des Elements, wenn Eltern layout="row" ist.

EDIT_01: Es hat Probleme, wenn nur ein Element vertikal zentriert ist oder so, ich hatte die gleichen Probleme damit.

Wenn Sie beide "Titel" wollen und "Fortschritt" wie in jsfiddle zentriert werden, sollten Sie layout="column" für "Lader" verwenden und keine absolute Positionierung für "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: auch dort w Es gibt viele redundante flex Attribute.

EDIT_03: layout-fill Argument verwenden wird einige Arbeit speichern, brauchen Sie nicht zu viele Elemente biegen und verwenden Layouteinstellungen manny: https://jsfiddle.net/suunyz3e/224/