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

Check out my solution: http://codepen.io/petethepig/pen/dvFsA

It's written in pure CSS, without any JS code. It can handle images of any size and any orientation.

add another div to your HTML code:

CSS code:

.imageContainer {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.imageContainer:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Update: I got rid of this

element in favor of :before CSS selector