How to make an image center (vertically & horizontally) inside a bigger div

Question

I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.

How can it be done?

I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue.

Answer 1

You can place it as the background image within the div, the CSS for that being like this:

#demo {

    background: url(bg_apple_little.gif) no-repeat center center;

    height: 200px;

    width: 200px;

}

It assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue while writing the JavaScript code.