垂直对齐动态高度元素

直观地应用 css 不会产生预期的结果，因为

• vertical-align:middle 是不适用于块级元素
• margin-top:auto 和 margin-bottom:auto 使用的值将计算为零
• margin-top:-50% 基于百分比的边距值是相对于包含块的宽度计算的

要获得最广泛的浏览器支持，请使用辅助元素进行解决方法：

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

来自原始问题的 jsfiddle 。这种方法

• 适用于动态高度元素
• 尊重内容流
• 旧版浏览器支持