vertical align with flexbox in IE11 and IE10

Question

How to make a cross browser solution where an element is vertical aligned?

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

When the centered element is higher than the viewport height the background is only 100% and not 100% 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;
}

score 10 · Accepted Answer · answered Jan 02 '15 at 21:44

10

How to make a cross browser solution where an element is vertical aligned?

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

The technique applied there is using the "display: table". Here is an article for an in-depth view 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;
}

answered Jan 02 '15 at 21:44

elad.chen

2,375
5
25
37

seems we had same idea – CalvT Jan 02 '15 at 21:49
Yea. I prefer this way of centering rather than the still "new" flexbox. – elad.chen Jan 02 '15 at 21:51
1

It's 2019 and I was trying to use flexbox to vertically center something...still not working properly in IE11. Thanks for this solution. – Danmoreng Jul 17 '19 at 21:16

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

You need to add a height to the div. As you have only specified a minimum height, IE automatically expands it to the max possible. So add a height, like this:

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

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

As this is a flex box, and therefore meant to flex, a good idea could be to make the height a percentage. So the div height would be - for example - 50% of the page height, unless the page was less than 200px high - then it would be 100px high.

Update: ~~Unfortunatly it is not possible to make the div fill the whole page with only CSS. However it seems it is possible with Javascript, see here Make a div fill the height of the remaining screen space~~

Actually - have achived it using ~~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 is coming after the one by elad.chen - but had already done this and posted it in the comment below - just hadn't got round to updating the question.

edited May 23 '17 at 11:51

Community

1
1

answered Jan 02 '15 at 21:07

CalvT

3,123
6
37
54

A new problem.. When the centered element is higher than viewport the background is only 100% and not 100% scroll height.. have updated question with new fiddle – clarkk Jan 02 '15 at 21:25
yes.. but would like to do it the "right" way without tables.. if you use tables you could make the layout with tables alone - without flexbox :) – clarkk Jan 02 '15 at 21:42
@clarkk What about this http://jsfiddle.net/e2yuqtdt/13/ - with divs instead of tables – CalvT Jan 02 '15 at 21:44
the fiddle returns 404 – clarkk Jan 02 '15 at 21:47
@clarkk sorry hadnt clicked save :D – CalvT Jan 02 '15 at 21:49
1

Thats better! :D but you don't even need styling on the outer div.. look here http://jsfiddle.net/e2yuqtdt/14/ – clarkk Jan 02 '15 at 21:55
Great :D - updating my answer :| – CalvT Jan 02 '15 at 21:56
hmm.. its still nok working properly.. if the centered element is smaller than viewport height.. – clarkk Jan 02 '15 at 22:02

vertical align with flexbox in IE11 and IE10

update

2 Answers2