Allineamento verticale - IE10 Flex box non funziona

Question

Ho il mio allineamento del centro funzionante in tutti i browser che lo supportano a parte IE10. Penso di avere la sintassi corretta e che lo supporti. Qualcuno potrebbe aiutare? 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

Lei ha il valore di visualizzazione a destra, ma tutte le altre proprietà Flexbox si sta utilizzando sono sbagliate. La traduzione corretta sarebbe come questo:

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

Tuttavia, se si sta utilizzando Flexbox per scopi di allineamento verticale, questo potrebbe essere quello che stai bisogno invece:

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

Nota quella scatola-align e flex-align/align-items sono non proprietà equivalenti, ma stanno eseguendo lo stesso compito qui.

Answer 2

L'aggiunta di un'altezza esplicita sembra essere la soluzione appropriata.

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

In tutti gli altri browser che supportano FlexBox, un contenitore flessibile basato flex-direction:column onorerà i contenitori min-height per calcolare flex-grow lunghezze. In IE10 & 11-preview sembra funzionare solo con un valore esplicito height.