Wyrównanie w pionie - IE10 Flex box nie działa

Question

Moje centrum wyrównywania działa we wszystkich przeglądarkach, które obsługują go poza IE10. Myślę, że mam poprawną składnię i że ją obsługuje. Czy ktoś mógłby pomóc? 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

masz prawo wyświetlaną wartość, ale wszystkie inne właściwości schematu flexbox używasz są błędne. Prawidłowe tłumaczenie byłoby tak:

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

Jednakże, jeśli używasz schematu flexbox celach pionie, to może być to, czego potrzebują, zamiast:

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

Zauważ, że box-align elementy dopasowujące i wyrównujące są równoważne, ale wykonują tutaj to samo zadanie.

Answer 2

Wydaje się, że właściwym rozwiązaniem jest dodanie określonej wysokości.

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

we wszystkich innych przeglądarek, które wspierają flexbox flex-direction:column oparty elastyczny pojemnik uhonoruje pojemniki min-height obliczyć flex-grow długości. W IE10 & 11-preview wydaje się, że działa tylko z wyraźną wartością height.