使用vertical-align：middle忽略CSS3 min-height属性

Question

http://codepen.io/maxwbailey/pen/nxaFr

我正在尝试将文本垂直居中。这仅在存在空白时才是重要的（当自动高度小于最小高度时为I.E.）。我怎么能做到这一点？我已经多次看过这个问题了，但我找到的答案都没有适用于我的申请。

谢谢！ ^ _ ^

Answer 1

鉴于你已经设置了75px的最小高度，你可以在文本的顶部和底部添加一半的填充，如下所示：

.warning {
  display:block;
  font-family: sans-serif;
  font-weight: bold;
  padding: 32.5px 0;
  /*vertical-align: middle;*/
}

.warning需要display: block;才能接受填充，但我认为这些是实现目标所必需的唯一变更。看看：http://codepen.io/maxwbailey/pen/qcvre

修改

如果要保持文本居中直到容器变得足够小以使其填充最小高度，则需要使用display: table-cell，如下所示：

.warning {
  display:table-cell;
  font-family: sans-serif;
  font-weight: bold;
  vertical-align: middle;
  height: 75px;
}

http://codepen.io/maxwbailey/pen/dwfar