在IE11和IE10中与flexbox垂直对齐

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