Applying css intuitively doesn’t produce the desired results because

• vertical-align:middle ***isn’t*** applicable to block-level elements
• margin-top:auto and margin-bottom:auto used values would compute as zero
• margin-top:-50% percentage-based margin values are calculated relative to the width of containing block

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