Flexbox无法在IE中垂直居中

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

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

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

注意：此应用程序仅针对Firefox，Chrome和IE（IE11）的最新版本，它们都支持Flexbox的候选推荐标准，因此（理论上）功能兼容性不应该成为问题。

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

编辑：IE11使用非供应商特定的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%;
}

我发现，当仅设置最小高度样式或根本没有高度样式时，浏览器在垂直对齐内部容器时会遇到问题。我所做的是添加了一些具有一定价值的高度样式，这为我解决了这个问题。

例如 ：

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

因此，现在我们有了高度样式，但是最小高度将覆盖它。这样，即很高兴，我们仍然可以使用最小高度。

希望这对某人有帮助。

尝试包装任何与flexbox绑定的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/

这是我的工作解决方案（SCSS）：

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

万一有人遇到我遇到的同样问题，以前的评论中没有专门解决。

我有margin: auto一个内部元素，它导致它粘在其父元素（或外部元素）的底部。对我来说固定的是将边距更改为margin: 0 auto;。

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

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

来自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;
}

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

定心

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

居中并滚动

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

我设置 .inner为display: block显式。在Chrome中，它看起来像是flex从继承的.outer。我还设置了宽度：

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

这样可以解决Chrome中的问题，希望它可以在IE11中完成相同的操作。这是我的小提琴版本：http : //jsfiddle.net/ToddT/5CxAy/21/

找到了一个对我有用的好的解决方案，请检查此链接https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 首先，我们添加一个父div，其次将min-height：100％更改为min-高度：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;
}  

如果您可以定义父级的宽度和高度，则可以使用一种更简单的方法来集中图像，而不必为其创建容器。

由于某些原因，如果您定义最小宽度，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/