IE10 - 使用 flexbox 在 div 中垂直居中多行文本时出现问题

Question

这是我目前得到的：

HTML:

<div class="container">
  <div class="info">
    This Is Info
  </div>
</div>

<div class="container">
  <div class="info">
    This Is More Info
  </div>
</div>

CSS：（更少）

body {
  background: #000;
}

.container {
  background: #eee;
  width: 150px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}

.info {
  background: #404040;
  color: #fff;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-align-items: center;
  font-size: 1.4em;
  padding: 1em;
  text-align: center;
  height: 20px;
  //overflow: hidden;
}

这在 Chrome 和 Firefox 中效果很好。但在 IE10 中，文本无法换行：

这是怎么回事，我该如何解决？我不一定要使用 flexbox，但这是我唯一能弄清楚如何将文本完美居中的方法 div 无论是一行还是两行。

Answer 1

如果您将信息文本包裹在一个额外的 <span> 中，您可以使用另一个问题中的双重 line-height 技巧来使文本垂直居中（不使用 flexbox）：
How do I vertically align something inside a span tag?

注意：我不得不删除垂直填充，而是将总高度设置为 3em

.info {
  background: #404040;
  color: #fff;
  font-size: 1.4em;

  padding: 0 1em;
  /*height: 3em;*/
  line-height: 3em;
  text-align: center;
}
.info span {
  display: inline-block;
  line-height: 1em;
  vertical-align: middle;
}

更新笔：http://codepen.io/anon/pen/aOQegy

IE10 - 使用 flexbox 在 div 中垂直居中多行文本时出现问题

IE10 - Trouble using flexbox to center multi-line text vertically within a div

html

css

internet-explorer

internet-explorer-10

flexbox