Question

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

然而，该页面并不以IE11为中心。我可以通过弯曲身体让页面在IE中居中，但是如果我这样做，那么内容开始从屏幕上移到顶部并切断内容的顶部。

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

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

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

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

Answer 1

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

例如：

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

所以现在我们有高度风格，但是最小高度会覆盖它。这样就很开心，我们仍然可以使用最小高度。

希望这对某人有帮助。

Answer 2

尝试使用flex-direction: column在一个也是flexboxed的容器中包装你使用flexboxed的div。

我刚刚在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/

Answer 3

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

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

Answer 4

以防有人带着我遇到的同样问题来到这里，这在以前的评论中没有具体说明。

我在内部元素上有margin: auto，导致它粘在它的父元素（或外元素）的底部。为我修复的是将保证金更改为margin: 0 auto;。

Answer 5

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

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

Answer 6

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

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

Answer 7

我对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/

Answer 8

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

出于某种原因，如果你定义了最小宽度，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/

Answer 9

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

Flexbox不在IE中垂直居中

9 个答案: