在 IE11 和 IE10 中与 flexbox 垂直对齐

Posted 2023-03-06

【中文标题】在 IE11 和 IE10 中与 flexbox 垂直对齐

【英文标题】：vertical align with flexbox in IE11 and IE10

【发布时间】：2015-03-01 03:47:00

【问题描述】：

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

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;

【参考方案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;

【讨论】：

看来我们的想法一样

是的。我更喜欢这种居中方式，而不是仍然“新”的 flexbox。

现在是 2019 年，我试图使用 flexbox 将某些东西垂直居中...在 IE11 中仍然无法正常工作。感谢您提供此解决方案。

【参考方案2】：

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

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

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

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

更新：很遗憾，仅使用 CSS 无法使 div 填充整个页面。但是似乎使用 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 发布的更新之后发布的 - 但已经完成并在下面的评论中发布了 - 只是还没来得及更新问题。

【讨论】：

一个新问题.. 当居中元素高于视口时，背景只有 100% 而不是 100% 滚动高度.. 用新小提琴更新了问题

@clarkk 看我的回答

是的..但是想以没有表格的“正确”方式来做..如果您使用表格，您可以单独使用表格进行布局 - 没有 flexbox :)

@clarkk 这个jsfiddle.net/e2yuqtdt/13 怎么样 - 用 div 代替表格

这样更好！ :D 但你甚至不需要外部 div 的样式.. 看这里jsfiddle.net/e2yuqtdt/14