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

Use height:100% for the html tag, body tag, container and an empty placeholder element plus display:inline-block; and vertical-align: middle for the content and placeholder to vertically center content that has an undefined height across browsers. The placeholder element is given 100% height to prop up the line box, so that vertical-align: middle has the desired effect. Use a fixed width container to wrap the images.

Use display:inline for the content div and text-align center to the container div to do horizontal centering for content that has an undefined width across browsers.

Combine both techniques to create a centered image gallery: