вертикальное выравнивание с flexbox в IE11 и IE10

Question

Как сделать решение для перекрестного браузера, где элемент вертикально выровнен?

http://jsfiddle.net/e2yuqtdt/3/

Это работает как в Firefox и Chrome, но не в IE11

<div class="page_login"> 
    <div>vertical-align:center; text-align:center</div> 
</div> 

html, body { 
    height:100%; 
} 

.page_login { 
    display:flex; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

.page_login > div { 
    margin:auto; 
    background:#fff; 
    min-height:100px; 
    width:200px; 
} 

обновление

Когда центрированный элемент выше, чем высота окна просмотра фона только 100% и не 100% высота прокрутки

http://jsfiddle.net/e2yuqtdt/8/

html, body { 
    min-height:100%; 
    height:100%; 
} 

.page_login { 
    display:flex; 
    min-height:100%; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

.page_login > div { 
    margin:auto; 
    background:#fff; 
    height:800px; 
    width:200px; 
} 

Answer 1

Как сделать кросс-браузерное решение, где элемент вертикальный выровнено?

Взгляните на эту скрипку: http://jsfiddle.net/5ry8vqkL/

Методика применяется там, используя «дисплей: стол». Вот статья для зрения углубленного подхода http://css-tricks.com/centering-in-the-unknown/

Поддерживаемые браузеры можно увидеть здесь: http://caniuse.com/#search=table-cell

HTML:

<div class="container"> 
    <div id="page-login"> 
     <div class="panel">Some content</div> 
    </div> 
</div> 

CSS:

html, body { 
    min-height:100%; 
    height:100%; 
} 

.container { 
    display: table; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

#page-login { 
    display: table-cell; 
    vertical-align: middle 
} 

.panel { 
    height: 100px; 
    background-color: #fff; 
} 

Answer 2

Вам нужно добавить высоту в div. Поскольку вы указали минимальную высоту, IE автоматически расширяет ее до максимально возможной. Так добавить высоту, как это:

.page_login > div { 
    margin:auto; 
    background:#fff; 
    min-height:100px; 
    width:200px; 
    height:200px; 
} 

http://jsfiddle.net/e2yuqtdt/6/

Как это прогибается коробка, и, следовательно, означает сгибаться, хорошая идея может быть, чтобы высота в процентах. Таким образом, высота div будет равна, например, 50% высоты страницы, если только страница не была меньше 200 пикселей в высоту, тогда она будет высотой 100 пикселей.

Обновление: К сожалению, невозможно, чтобы div заполнил всю страницу только CSS. Однако, кажется, можно с Javascript, смотрите здесь Make a div fill the height of the remaining screen space

На самом деле - есть achived его с помощью столов дивы

http://jsfiddle.net/e2yuqtdt/14/

<div> 
    <div id="div1"> 
     <div id="div2">vertical-align:center; text-align:center</div> 
    </div> 
</div> 


#div1 { 
    display:flex; 
    height:100%; 
    width:100%; 
    background:#303030; 
} 

#div2 { 
    margin:auto; 
    background:#fff; 
    height:800px; 
    width:200px; 
} 

Я знаю, что это обновление приходит после того, по Elad .chen - но уже сделал это и разместил его в комментарии ниже - просто не дошел до обновления вопроса.