How to display image in the center of a div

Question

The following assumes that the width and height of the image is known:

#mydiv {
  height: 400px;
  position: relative;
  background-color: gray; /* for demonstration */
}
.ajax-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px; /* -1 * image width / 2 */
  margin-top: -32px; /* -1 * image height / 2 */
}

<div id="mydiv">
  <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>

UPDATE: in modern browsers margin: auto will produce the desired result withing knowing the width/height of the image:

#mydiv {
  height: 400px;
  position: relative;
  background-color: gray; /* for demonstration */
}
.ajax-loader {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* presto! */
}

<div id="mydiv">
  <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>

Leave a Comment Cancel reply