CSS Centering Vertically align dynamic height elements


Example

Applying css intuitively doesn't produce the desired results because

For widest browser support, a workaround with helper elements:

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 from original question. This approach

  • works with dynamic height elements
  • respects content flow
  • is supported by legacy browsers