Working in old browsers (IE >= 8)
Automatic margins, paired with values of zero for the left
and right
or top
and bottom
offsets, will center an absolutely positioned elements within its parent.
HTML
<div class="parent">
<img class="center" src="http://lorempixel.com/400/200/" />
</div>
CSS
.parent {
position: relative;
height: 500px;
}
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Elements that don't have their own implicit width and height like images do, will need those values defined.
Other resources: Absolute Centering in CSS