How to center div that contains an image within a div?

Question

I need to center a image inside a div both vertically and horizontally. I am using the display inline-block property.

HTML

Answer 1

This approach works perfectly for dynamic content of unknown dimensions.

jsFiddle example

Basically, we are using vertical-align:middle for vertical centering, and text-align:center for horizontal centering. In order for vertical-align:middle to work on a div, we need to set the parent elements to display:table, and the targeted child div to display:table-cell. Sure you could achieve such centering with absolute positoning, however, that would require you to know the dimensions of the img. This approach works for unknown dimensions.

HTML

CSS

html, body {
    height:100%;
    width:100%;
    margin:0px;
}
.container {
    display:table;
    vertical-align:middle;
    text-align:center;
    height:100%;
    width:100%;
}
.box {
    display:table-cell;
    vertical-align:middle;
}