Flexbox在IE中不垂直居中

问题描述

我有一个简单的网页，有一些以页面为中心的Lipsum内容。该网页在Chrome和Firefox中正常工作。如果我减小窗口的大小，内容填充窗口，直到它不能，然后添加一个滚动条，并在屏幕底部填充内容。

但是，该页面不在IE11中心。我可以通过弯曲身体获得页面在IE中心，但如果我这样做，那么内容开始向屏幕顶部，并切断内容的顶部。

以下是两种情况。查看相关的Fiddles。如果问题不立即出现，请缩小结果窗口的大小，以便强制生成滚动条。

注意：此应用程序仅定位最新的Firefox，Chrome和IE（IE11）的版本，这些版本都支持的候选建议，因此

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

编辑：IE11使用非供应商特定的Flexbox实现。

---

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

小提琴：

  html，body 
 {
高度：100％; 
 width：100％; 
} 
 
 body 
 {
 margin：0; 
 display： 
} 
 
 .outer 
 {
 min-width：100％; 
 min-height：100％; 
 display： 
 align-items：center; 
 justify-content：center; 
} 
 
 .inner 
 {
 width：80％; 
} 
  

解决方案

问题来垂直对齐内部容器，当只设置最小高度样式或根本没有高度样式。

例如：

pre> .outer
{
display：-ms-flexbox;
display：-webkit-flex;
display：flex;

/ *垂直中心* /
align-items：center;

/ *中心horizo​​ntaly * /
justify-content：center;

/ *中心horizo​​ntaly ie * /
-ms-flex-pack：center;

min-height：220px;
height：100px;

min-height：220px;
height：120px;
}


现在我们有height样式，但是min-height会覆盖它。

希望这对某人有帮助。

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.

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.

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).

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.

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

---

Centers and Resizes Correctly in Chrome/FF, Does Not Center But Resizes Correctly in IE11

Fiddle: 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%;
}

---

Centers Correctly in Everywhere, Cuts Off Top When Sized Down

Fiddle: 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%;
}

解决方案

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.

for example :

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

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

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.

Hope this is helpful for someone.

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