Vertical Aligning - IE10 Flex box not working - css

Question

I have my center aligning working in all browsers that support it apart from IE10. I think that I have the syntax correct and that it does it support it. Could anyone help? 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

You have the right display value, but all of the other Flexbox properties you're using are wrong. The proper translation would be like this:
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;
}
However, if you're using Flexbox for vertical alignment purposes, this might be what you're needing instead:
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;
}
Note that box-align and flex-align/align-items are not equivalent properties, but they're performing the same task here.

Answer 2

Adding an explicit height seems to be the appropriate solution.
From: Microsoft Connect - Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview
In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.