在 IE11 和 IE10 中与 flexbox 垂直对齐

Question

如何制作元素垂直对齐的跨浏览器解决方案？

这适用于 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

您需要为 div 添加高度。由于您只指定了最小高度，IE 会自动将其扩展到最大可能。所以加个高度，像这样：

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

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

由于这是一个弹性盒子，因此意味着可以弯曲，一个好主意是将高度设为百分比。因此 div 高度将是 - 例如 - 页面高度的 50%，除非页面高度小于 200px - 那么它将是 100px 高。

更新：不幸的是，div 无法仅用 CSS 填满整个页面。然而，Javascript 似乎是可行的，请参阅此处 Make a div fill the height of the remaining screen space

实际上 - 使用 ~~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;
}

我知道此更新是在 elad.chen 的更新之后发布的 - 但我已经完成此更新并将其发布在下面的评论中 - 只是没有时间更新问题。

Answer 2

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

看看这个fiddle：http://jsfiddle.net/5ry8vqkL/

那里应用的技术是使用"display: table"。这是一篇深入了解该方法的文章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;
}

在 IE11 和 IE10 中与 flexbox 垂直对齐

vertical align with flexbox in IE11 and IE10

css

internet-explorer

flexbox

internet-explorer-10

更新