Vertical alignment with flexbox in IE11 and IE10

Question

How to make a cross-browser solution where the element is vertically aligned?

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

This works in both Firefox and Chrome, but not in 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; } 

Update

If the centered element is higher than the height of the viewport, the background is only 100%, not 100% of the scroll height

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

How to make a cross-browser solution when the element is vertically aligned?

Take a look at this script: http://jsfiddle.net/5ry8vqkL/

The technique used uses "display: table". Here's an article for an in-depth review of the approach http://css-tricks.com/centering-in-the-unknown/

Supported browsers can be seen here: 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

You need to add height to the div. Since you specified the minimum height, IE automatically expands it to the maximum possible. So add height, for example:

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

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

Since this is a flexible box, and therefore intended to be flexible, it is a good idea to increase the height in percent. Thus, the height of the div will be equal to, for example, 50% of the height of the page, if only the page was not less than 200 pixels in height, then it would be 100 pixels high.

Update : Unfortunately, it is not possible for a div to fill the entire page with only CSS. However, this seems to be possible with Javascript, see here Make a div to fill the height of the remaining screen

In fact - reached it with tables divs

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

I know this update happens after elad.chen - but already done it and posted it in the comment below - just didn't get around to updating the question.