IE flexbox垂直对齐中心和最小高度[重复]答案

【问题标题】：IE flexbox vertical align center and min-height [duplicate]IE flexbox垂直对齐中心和最小高度[重复]
【发布时间】：2018-04-21 03:29:22
【问题描述】：

我正在尝试垂直对齐具有最小高度的 flexbox 容器内的一些文本，并且它运行良好，除了在 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>

我环顾四周，遇到类似问题的人建议adding a height will fix the issue，但显然这否定了min-height，所以它不是很有用。

有谁知道让垂直居中在最小高度下工作的方法吗？

【问题讨论】：

只要让父容器成为一个弹性容器。有关详细信息，请参阅副本。 jsfiddle demo
我试过了，它似乎没有用，也许是行的东西破坏了它（见下面的答案之一）。如果您想回答，似乎比表格单元黑客更好的解决方案
在我看来，这是一种更清洁、更高效的解决方案。我将问题作为重复项关闭，因为该问题已在该帖子中详细解决。
您也可以使其与flex-direction: row 一起使用，但是您需要将flex-grow 添加到您的内容项中。 revised demo
啊，非常感谢 :)

标签： css internet-explorer flexbox internet-explorer-11

【解决方案1】：

Chris Wright 的这个修复可能有用： https://codepen.io/chriswrightdesign/pen/emQNGZ/

它基于将 flex-direction:column 包装在 flex-direction:row 父级中的想法：

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

    }

【讨论】：

很好的答案。像魅力一样工作

【解决方案2】：

如果您愿意检测不同的 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>

【讨论】：

我正在研究一个 ie only hack 使用这些媒体查询，看起来老式的 table-cell 将是最好的选择