在 IE 中没有垂直居中的 Flexbox

我有一个简单的网页与一些 Lipsum 内容是中心的网页。该页面在 Chrome 和 Firefox 中运行良好。如果我减小窗口的大小，内容就会填满窗口，直到无法填满为止，然后添加一个滚动条，将内容从屏幕填充到底部。

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 的候选推荐，所以功能兼容性应该不是问题(理论上)。

编辑 : 当使用 Fullscreen API 全屏显示外部 div 时，所有浏览器都正确地使用原始 CSS 居中。然而，在离开全屏模式后，IE 又回到水平居中和垂直顶部对齐的状态。

编辑 : IE11使用非供应商特定的 Flexbox 实现。 < a href = “ http://msdn.microsoft.com/en-us/library/ie/dn265027% 28v = vs. 85% 29.aspx”rel = “ noReferrer”> Flexbox (“ Flexbox”)布局更新

在 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%;
}
131726 次浏览
小开

我已经更新了两把小提琴。我希望它能使你的工作完成。

centering

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


body
{
margin: 0;
}


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


.inner
{
width: 80%;
margin: 0 auto;
}

center and scroll

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


body
{
margin: 0;
display:flex;
}


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


.inner
{
width: 80%;
margin-top:40px;
margin: 0 auto;
}
小开

我对 Flexbox没有太多的经验，但是在我看来，html和 body标签上的强制高度在调整大小时会导致文本在顶部消失——我不能在 IE 中测试，但是我在 Chrome 中发现了同样的效果。

我分叉了你的小提琴，删除了 height和 width声明。

body
{
margin: 0;
}

似乎 flex设置也必须应用于其他 flex元素。然而，将 display: flex应用到 .inner会导致问题，因此我显式地将 .inner设置为 display: block，并将 .outer设置为 flex以进行定位。

我设置了最小的 .outer高度来填充视图，即 display: flex，并设置了水平和垂直的对齐方式:

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

I set .inner to display: block explicitly. In Chrome, it looked like it inherited flex from .outer. I also set the width:

.inner
{
display:block;
width: 80%;
}

这修复了 Chrome 的问题，希望 IE11也能做到这一点。这是我的小提琴版本: http://jsfiddle.net/ToddT/5CxAy/21/

小开

我发现，即浏览器有问题，以垂直对齐内部容器，当只有最小高度样式设置或当高度样式是完全缺失。我所做的就是添加一些有价值的高度样式，并为我解决了这个问题。

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 会覆盖它。那样我们就会很开心，我们仍然可以使用最小高度。

Hope this is helpful for someone.

小开

This is a known bug that appears to have been fixed internally at Microsoft.

Https://connect.microsoft.com/ie/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

小开

以防有人带着和我一样的问题来到这里，这个问题在之前的评论中没有特别提到。

我在内部元素上安装了 margin: auto，这使得它粘附在它的父元素(或外部元素)的底部。 对我来说，修正这个问题的方法是将利润率改为 margin: 0 auto;。

小开

尝试包装任何 div 你有柔性盒与 flex-direction: column在一个容器，也是柔性盒。

我刚刚在 IE11中测试了一下，它很有效。一个奇怪的修复，但直到微软使他们的内部错误外部修复... 它将不得不做！

HTML:

<div class="FlexContainerWrapper">
<div class="FlexContainer">
<div class="FlexItem">
<p>I should be centered.</p>
</div>
</div>
</div>

CSS:

html, body {
height: 100%;
}


.FlexContainerWrapper {
display: flex;
flex-direction: column;
height: 100%;
}


.FlexContainer {
align-items: center;
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
width: 600px;
}


.FlexItem {
background: hsla(0,0%,0%,.1);
box-sizing: border-box;
max-width: 100%;
}

在 IE11中测试的2个例子: http://codepen.io/philipwalton/pen/JdvdJE Http://codepen.io/chriswrightdesign/pen/emqngz/

小开

如果可以定义父元素的宽度和高度，那么有一种更简单的方法可以集中图像，而不必为其创建容器。

出于某种原因，如果你定义了最小宽度，IE 也会识别出最大宽度。

此解决方案适用于 IE10 + 、 Firefox 和 Chrome。

<div>
<img src="http://placehold.it/350x150"/>
</div>


div {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid orange;
width: 100px;
height: 100px;
}


img{
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}

Https://jsfiddle.net/humbertomendes/t13dzsmn/

小开

找到了一个对我有效的解决方案，点击这个链接 < a href = “ https://codepen.io/chriswrightdesign/pen/emQNGZ/? Editor = 1100”rel = “ nofollow noReferrer”> https://codepen.io/chriswrightdesign/pen/emqngz/?editors=1100 首先，我们添加一个父 div，然后将 min-height: 100% 更改为 min-height: 100vh。

// by having a parent with flex-direction:row,
// the min-height bug in IE doesn't stick around.
.flashy-content-outer {
display:flex;
flex-direction:row;
}
.flashy-content-inner {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-width:100vw;
min-height:100vh;
padding:20px;
box-sizing:border-box;
}
.flashy-content {
display:inline-block;
padding:15px;
background:#fff;
}
小开

以下是我的工作解决方案(SCSS) :

.item{
display: flex;
justify-content: space-between;
align-items: center;
min-height: 120px;
&:after{
content:'';
min-height:inherit;
font-size:0;
}
}
小开

https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042的原始答案

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}


.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

提交答案