以偽元素為中心

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 的高度擴充套件。