Vertikale Ausrichtung - IE10 Flex-Box funktioniert nicht

Question

Ich habe meine Center-Ausrichtung funktioniert in allen Browsern, die es abgesehen von IE10 unterstützt. Ich denke, dass ich die Syntax korrekt habe und dass sie es unterstützt. Könnte jemand helfen? DEMO

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

Answer 1

Sie haben das Recht Anzeigewert, aber alle anderen Flexbox Eigenschaften sind Sie verwenden falsch. Die richtige Übersetzung so sein würde:

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

Wenn Sie jedoch Flexbox für vertikale Ausrichtung Zwecke verwenden, könnte dies sein, was Sie benötigen statt:

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

Beachten Sie, dass Box-align und flex-align/align-items sind nicht äquivalente Eigenschaften, aber sie führen die gleiche Aufgabe hier aus.

Answer 2

Das Hinzufügen einer expliziten Höhe scheint die geeignete Lösung zu sein.

Von: Microsoft Connect - Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview

In allen anderen Browsern, die Flexbox, ein flex-direction:column basierte Flex Container unterstützen ehren die Behälter min-heightflex-grow Längen zu berechnen. In IE10 & 11-Vorschau scheint es nur mit einem expliziten height Wert zu arbeiten.