IE flexbox垂直居中和最小高度

Question

我正在尝试在具有最小高度的弹性盒容器中垂直对齐一些文本，除了ie11之外，它都很好用，因为内容没有居中。

.banner {
  background:#ccc;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  flex-direction:column;
}

<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
    <span>IE is bobbins</span>
</div>

我已经查看了一些类似问题的解决方案，有人建议添加高度来解决问题，但这显然会使min-height失效，因此并不是很有用。

有没有人知道如何在IE中使用min-height实现垂直居中？

- Pete

---

只需将父元素设置为 flex 容器即可。详见重复内容。jsfiddle 演示 - Michael Benjamin

我尝试过了，似乎没有起作用，也许是行的问题导致它出错了（请参见下面的一个答案）。如果您想回答，这似乎是比表格单元格hack更好的解决方案。 - Pete

在我看来，这是一种更清洁和高效的解决方案。我将该问题标记为重复，因为该帖子详细讨论了此问题。 - Michael Benjamin

你也可以使用 flex-direction: row 让它工作，但是你需要为你的内容项添加 flex-grow。修订版演示 - Michael Benjamin

啊，好的谢谢 :) - Pete

Answer 1

如果您愿意检测并应用不同的CSS到ie11，可以尝试以下操作：

请访问以下链接：fiddle。

.banner {
  background: #ccc;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  flex-direction: column;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
  .banner span {
    display: table-cell;
    min-height: 60px;
    vertical-align: middle;
  }
}

<div id="section-title-1" class="banner banner--theme-1 js-section-title" data-title="Section Title">
  <span>IE is bobbins</span>
</div>

- sol

---

我正在研究一种仅适用于IE浏览器的Hack，使用了那些媒体查询，看起来旧式的table-cell将是最佳选择。 - Pete

Answer 2

这个由Chris Wright提供的修复方法可能很有用： https://codepen.io/chriswrightdesign/pen/emQNGZ/ 它基于将flex-direction: column包装在flex-direction: row父元素内的想法：

    .l-flex-parent {
      display:flex;
      flex-direction:row;

    }

- holden

---

很棒的答案。像魔法一样有效。 - Gordon Mohrin