Flexbox 不在 IE 中垂直居中

问题描述

我有一个简单的网页，其中包含一些以页面为中心的 Lipsum 内容.该页面在 Chrome 和 Firefox 中运行良好.如果我减小窗口的大小，内容会填满窗口，直到无法填满，然后添加一个滚动条并在屏幕外向底部填充内容.

I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can't and then adds a scroll bar and fills content off screen, toward the bottom.

但是，页面不会在 IE11 中居中.我可以通过弯曲主体使页面在 IE 中居中，但如果我这样做，则内容开始向顶部移出屏幕并切断内容的顶部.

However, the page doesn't center in IE11. I can get the page to center in IE by flexing the body, but if I do, then the content starts to go off screen towards the top and cuts off the top of the content.

以下是两种情况.请参阅相关的小提琴.如果问题不立即明显，请减小结果窗口的大小，以便强制生成滚动条.

Below are the two scenarios. See the associated Fiddles. If the problem isn't evident right away, reduce the size of the result window so that it's forced to generate a scroll bar.

注意:此应用程序仅针对最新版本的 Firefox、Chrome 和 IE (IE11)，它们都支持 Flexbox 的候选推荐，所以功能兼容性应该不是问题(理论上).

Note: This application only targets the latest versions of Firefox, Chrome and IE (IE11), which all have support for the Candidate Recommendation of Flexbox, so feature compatibility shouldn't be an issue (in theory).

编辑:当使用 Fullscreen API 全屏显示外部 div 时，所有浏览器都使用原始 CSS 正确居中.但是，在离开全屏模式后，IE 恢复为水平居中和垂直顶部对齐.

Edit: When using the Fullscreen API to fullscreen the outer div, all browsers correctly center using the original CSS. However, upon leaving the fullscreen mode, IE reverts back to being horizontally centered and vertically top aligned.

编辑:IE11 使用 Flexbox 的非供应商特定实现.弹性框(Flexbox")布局更新

Edit: IE11 uses non-vendor specific implementation of Flexbox. Flexible box ("Flexbox") layout updates

在 Chrome/FF 中正确居中和调整大小，在 IE11 中不居中但正确调整大小

小提琴:http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

在任何地方正确居中，缩小尺寸时切断顶部

小提琴:http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

推荐答案

我发现 ie 浏览器在垂直对齐内部容器时有问题，当仅设置 min-height 样式或完全缺少 height 样式时.我所做的是添加具有一定价值的高度样式，这为我解决了问题.

I found that ie browser have problem to vertically align inner containers, when only the min-height style is set or when height style is missing at all. What I did was to add height style with some value and that fix the issue for me.

例如:

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px;
        height:100px;
    }

所以现在我们有了高度样式，但是最小高度会覆盖它.这样 ie 很高兴，我们仍然可以使用 min-height.

So now we have height style, but the min-height will overwrite it. That way ie is happy and we still can use min-height.

希望这对某人有帮助.

这篇关于Flexbox 不在 IE 中垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！