122

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

但是，该页面不在 IE11 中居中。我可以通过弯曲正文使页面在 IE 中居中，但如果我这样做了，那么内容就会开始向顶部移出屏幕并切断内容的顶部。

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

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

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

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

10 回答 10

236

我发现 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。

希望这对某人有帮助。

于 2014-08-19T14:39:04.323 回答
74

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

我刚刚在 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%;
}

2 个示例供您在 IE11 中测试：http: //codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

于 2015-10-19T19:54:09.640 回答
17

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

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}
于 2019-02-20T22:16:20.883 回答
12

来自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;
}
于 2019-10-23T12:07:00.920 回答
6

以防万一有人遇到与我相同的问题，之前的评论中没有特别提到。

我margin: auto在内部元素上导致它粘在它的父元素（或外部元素）的底部。为我解决的问题是将边距更改为margin: 0 auto;.

于 2015-09-21T15:50:32.740 回答
5

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

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

于 2014-08-31T05:52:39.847 回答
3

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

定心

    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;
    }
于 2013-10-19T11:22:07.173 回答
1

我没有太多经验，Flexbox但在我看来，htmlandbody标签上的强制高度会导致文本在调整大小时消失在顶部——我无法在 IE 中进行测试，但我在 Chrome 中发现了相同的效果。

我分叉了你的小提琴并删除了heightandwidth声明。

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/

于 2013-10-24T04:13:33.637 回答
1

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

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

于 2017-03-08T15:29:45.120 回答
1

找到了一个对我有用的好解决方案，请查看此链接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;
}
于 2018-05-24T07:28:52.680 回答