Question

Possible Duplicate:
vertical alignment of image inside a div

OK, this what I’m trying to do :

• I’m having an empty div (a box), with almost no height.
• I’m making an AJAX request to load some content into it.
• Before loading the content, I want to display in a typical “ajax loading” rotating gif.

I’ve managed to :

• Center the img horizontally (by putting it inside another div with text-align:center;)

What is left :

• Be able to give some height to that empty div. (easy)
• Vertically align the image, so that it appears on the very center of the box. (I’ve got absolutely no idea how to do this. I’m currently setting an upper margin, which works for one particular box, but which wouldn’t work if the box already has some different height…)

How would you go about it?? (Any possible idea is acceptable. CSS/Javascript whatever…)

Answer 1

http://jsfiddle.net/teresko/5mG2y/

The basic idea is the use display: table-cell; and then vertical-align: middle;

_{the HTML}

<div class="container">
    <div class="holder">
        <img class="stuff" src="path/to/image.png">
    </div>                
</div>

_{the CSS:}

.container{ 
    /* the container in which image is placed */
    height:         300px;
    margin:         0 auto;
    width:          200px;
}

.holder{
    display:        table-cell;
    width:          100%;
    vertical-align: middle;
    height:         inherit;
}

.stuff{
    display:        block;
}

This way the placement of image will not depend on dimensions of container. It also can be adjusted to be in horizontal center too. All you have to do is to add .stuff{ margin: 0 auto;}.