[FIXED] How to center the image of unknown size inside div?

Issue

Assume that I have a div having the following styles:

#container {
    position: fixed;
    width: 100%;
    height: 100%;
}

Also I have an image of unknown size (the size may vary), which I want to align both vertically and horizontally.

What is the best way of doing that?

Solution

The background image method will work, with background-position:center center, unfortunately you'll lose control of scaling your image.

You can set your image as follows:

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

PS. Keep in mind that this will be centered relative to its closest positioned parent.

Answered By - Benn Wolfe

Answer Checked By - Pedro (PHPFixing Volunteer)