Css 与IE11和IE10中的flexbox垂直对齐

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

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

---

您需要为div添加一个高度。因为您只指定了一个最小高度，即自动将其扩展到可能的最大高度。因此，添加一个高度，如下所示：

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

由于这是一个灵活的盒子，因此意味着要灵活，一个好主意是将高度设置为一个百分比。因此，div高度将是（例如）页面高度的50%，除非页面高度小于200px，否则它将是100px

更新：不幸的是，无法让div仅用CSS填充整个页面。不过，使用Javascript似乎是可行的，请参见此处

实际上，我们已经用表div实现了它

垂直对齐：居中；文本对齐：居中
#第一组{
显示器：flex；
身高：100%；
宽度：100%；
背景:#303030；
}
#第二组{
保证金：自动；
背景：#fff；
高度：800px；
宽度：200px；
}

我知道这个更新是在elad.chen的更新之后发布的，但是我已经做了，并在下面的评论中发布了它，只是没有时间更新这个问题

如何在元素垂直的位置创建跨浏览器解决方案 对齐

看看这把小提琴：

这里应用的技术是使用“显示：表格”。下面是一篇深入了解该方法的文章

支持的浏览器可在此处查看：

HTML:

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

---

一个新问题。。当居中元素高于视口时，背景仅为100%，而不是100%滚动高度。。用新的问题更新了问题fiddle@clarkk看到我的答案了吗。。但是我想用没有桌子的“正确”方式。。如果使用表，则可以单独使用表进行布局—不使用flexbox:）@clarkk这是怎么回事—使用div而不是表更好！：D但你甚至不需要在外层分区上设置样式。。听着，看来我们有相同的想法。我更喜欢这种居中方式，而不是仍然“新”的flexbox。现在是2019年，我试图使用flexbox垂直居中一些东西……在IE11中仍然不能正常工作。谢谢你的解决方案。

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

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

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