Vertically align dynamic height elements

suggest change

Applying css intuitively doesn’t produce the desired results because

For widest browser support, a workaround with helper elements:


<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">


.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

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents