Using position absolute

suggest change

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.

View Result


<div class="parent">
  <img class="center" src="" />


.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

Feedback about page:

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

Table Of Contents