Example
Applying css intuitively doesn't produce the desired results because
vertical-align:middleisn't applicable to block-level elementsmargin-top:autoandmargin-bottom:autoused values would compute as zeromargin-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
