以伪元素为中心

HTML:

<div class="wrapper">
  <div class="content"></div>
</div>

CSS:

.wrapper{
   min-height: 600px;
}

.wrapper:before{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.content {
  display: inline-block;
  height: 80px;
  vertical-align: middle;
}

这种方法最适用于在 .wrapper 内部有一个高度变化的 .content; 当 .content 的高度超过 .wrapper 的最小高度时,你想要 .wrapper 的高度扩展。