How to center the image with unknown size inside div?

Question

So, I have the div with these parameters:

container {
position:fixed;
background-color: rgba(50,50,50,0.7);
width:100%;
height:100%;
display:none;}

It contains the image with unknown size (the size is dinamic and it may be different).

I need to align the image vertically and horizontally.

Please, help

Answer 1

The easiest cross-browser way would be to set your dynamic image as a background property on the #container:

<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div>

Answer 2

Add the following:

The first two lines center it vertically, the last horizontally.

display: table-cell;
vertical-align: middle ;
text-align: center;

more info can be found here: http://www.w3.org/Style/Examples/007/center

Answer 3

This will center vertically and horizontally.

#container {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/nfBDT/

Answer 4

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;

Answer 5

i believe the easiest way is to do this:

.container img {
    display:block;
    margin:auto;
}

adjust .container to suit your div (not sure if yours was a class or ID)

oh I didn't read all of your question.

this appears to work:

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

full credit: http://www.brunildo.org/test/img_center.html

Answer 6

http://zoffix.com/new/absolute-center-random-width-height.html

This is a pretty decent example. Usually you use table/vertical-align for modern browsers and positioning+%s for IE.