Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?

Question

If I have a fixed sized container div, and an unknown sized image, how do I horizontally and vertically center it?

• using pure css
• using JQuery if css

Answer 1

Using display: table-cell trick for div

Working correctly in: Firefox, Safari, Opera, Chrome, IE8

CSS example:

div {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
img {
  display: inline;
}

HTML example:

Firefox example