Internet explorer Flexbox未在IE中垂直居中

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

但是，该页面并不以IE11为中心。我可以通过调整页面主体使页面在IE中居中，但如果我这样做，则内容开始向顶部移动，并切断内容的顶部

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

注意：此应用程序只针对Firefox、Chrome和IE（IE11）的最新版本，它们都支持，因此功能兼容性不应该是一个问题（理论上）

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

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

---

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

小提琴：

---

在所有位置正确居中，缩小尺寸时切掉顶部

小提琴：

---

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

---

我对

Flexbox

没有太多经验，但在我看来，

html

和

body

标记上的强制高度会导致文本在调整大小时顶部消失——我无法在IE中测试，但我在Chrome中发现了同样的效果

我用叉子叉了叉你的小提琴，去掉了

高度

和

宽度

声明

body
{
    margin: 0;
}

似乎

flex

设置必须应用于其他

flex

元素。但是，将

display:flex

应用于

.internal

会导致问题，因此我明确地将

.internal

设置为

display:block

，并将

.outer

设置为

flex

进行定位

我设置了最小

.outer

高度以填充视口，

显示：flex

，并设置了水平和垂直对齐：

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

我显式地将

.internal

设置为

display:block

。在Chrome中，它看起来像是从

.outer

继承了

flex

。我还设置了宽度：

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

---

这解决了Chrome中的问题，希望它在IE11中也能这样做。以下是我的版本：

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

例如：

.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

---

希望这对其他人有所帮助。

这是一个已知的bug，似乎已在Microsoft内部修复

---

以防万一有人带着与我相同的问题来到这里，这在之前的评论中没有特别提到

我在内部元素上有

margin:auto

，这导致它粘在其父元素（或外部元素）的底部。

---

对我来说，修正的方法是将边距改为

边距：0自动

尝试将使用flex-direction:column进行flex-boxed的任何div包装到一个同样使用flex-boxed的容器中

我刚刚在IE11中测试了这个功能，它很有效。这是一个奇怪的修复，但在微软将其内部缺陷修复为外部修复之前……它必须这样做

HTML:

在IE11中测试的两个示例：

---

如果可以定义父对象的宽度和高度，则有一种更简单的方法可以集中图像，而无需为其创建容器

出于某种原因，如果定义最小宽度，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%;
}

div{
显示：-ms flexbox；
显示器：flex；
-ms-flex-pack:center；
证明内容：中心；
-ms-flex-align：居中；
对齐项目：居中；
边框：1px实心橙色；
宽度：100px；
高度：100px；
}
img{
最小宽度：10%；
最大宽度：100%；
最小高度：10%；
最大高度：100%；
}

---

找到了一个很好的解决方案，请查看此链接 首先，我们添加一个父div，然后将minheight:100%更改为minheight: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）：

最初的答案来自

---

我目前没有访问IE11的权限，您是否尝试过此解决方案：？margin:auto似乎没有什么不同。请向Microsoft报告错误，至少他们在正式发布时会少一个错误，因为IE总是会有一些（许多独特的错误）要处理..您需要为IE使用..IE11使用当前的Flexbox显示标准：flex。不管怎样，我试过了，但没什么不同；内容仍然是顶部对齐的。另外，请注意我在原始问题中的编辑，该问题指出，外部div在全屏时正确居中，但在全屏外时顶部对齐。感谢您的输入。不幸的是，您的小提琴在Chrome或IE11中似乎不起作用。居中示例在Chrome中不再居中，居中和滚动示例在IE11中不再居中，仍然会切断内容。感谢您的回复。高度和宽度声明必须在IE中垂直居中。没有它，内容在IE11中不再居中。即使在外部div上设置了高度？也许可以给车身增加一个最小高度？别忘了

-ms flex align:center用于IE10。啊!！几个月后，这救了我-塞蒂
.inner
{
    display:block;
    width: 80%;
}

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

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

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

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

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

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

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

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