Vertical alignment - IE10 Flex not working

Question

I have a center alignment that works in all browsers that support it separately from IE10. I think I have the correct syntax and that it supports it. Can 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 correct display value, but all other Flexbox properties that you use are incorrect. The correct translation will 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 use Flexbox for vertical alignment purposes, this may be what you need:

 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 field align and align / align elements are not equivalent properties, but here they perform the same task.

Answer 2

Adding explicit heights seems to be the appropriate solution.

From: Microsoft Connect - Min-height and flexbox (flex-direction: column) do not work together in IE 10 and 11-preview

In all other browsers that support flexbox, a flex-direction:column based flexible container will evaluate min-height containers to calculate flex-grow lengths. In IE10 and 11 preview, it only works with explicit height value.