Вертикальное выравнивание - IE10 Flex box не работает

Question

У меня есть мое выравнивание по центру, работающее во всех браузерах, которые поддерживают его отдельно от IE10. Я думаю, что у меня правильный синтаксис и что он его поддерживает. Может ли кто-нибудь помочь? 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

Вы имеете значение правильного отображения, но и все другие Flexbox свойства, которые вы используете неверны. Правильный перевод будет выглядеть так:

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

Однако, если вы используете Flexbox для вертикального выравнивания целей, это может быть то, что вы нуждаясь вместо:

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

Обратите внимание, что окно выравнивания и flex-align/align-items - , а не эквивалентных свойств, но здесь они выполняют одну и ту же задачу.

Answer 2

Добавление явной высоты, по-видимому, является подходящим решением.

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

Во всех других браузерах, которые поддерживают Flexbox, базируемый гибкий контейнер flex-direction:column почтит контейнеры min-height для расчета flex-grow длины. В IE10 & 11-превью он работает только с явным значением height.