Comment centrer l'image avec une taille inconnue à l'intérieur de div?

Question

Alors, je le div avec ces paramètres:

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

Il contient l'image avec une taille inconnue (la taille est Dinamic et il peut être différent).

J'ai besoin d'aligner l'image verticalement et horizontalement.

S'il vous plaît, aidez

Answer 1

La méthode de l'image d'arrière-plan fonctionnera, avec position de fond: centre centre, malheureusement, vous perdrez le contrôle de mise à l'échelle de l'image.

Vous pouvez définir votre image comme suit:

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

PS. Gardez à l'esprit que ce sera centré par rapport à son parent le plus proche parent.

Answer 2

Le sur la #container façon la plus simple cross-navigateur serait de définir votre image dynamique en tant que propriété de fond:

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

Answer 3

Ajoutez ce qui suit:

Les deux premiers les lignes le centrent verticalement, le dernier horizontalement.

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

plus d'informations peuvent être trouvées ici: http://www.w3.org/Style/Examples/007/center

Answer 4

Ce centrera verticalement et horizontalement.

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

http://jsfiddle.net/nfBDT/

Answer 5

Je crois que la meilleure façon est de le faire:

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

régler .container en fonction de votre div (pas sûr si le vôtre est une classe ou ID)

oh je ne l'ai pas lu tous de votre question.

cela semble fonctionner:

<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]--> 

plein crédit: http://www.brunildo.org/test/img_center.html

Answer 6

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

Ceci est un exemple assez décent. Habituellement, vous utilisez la table/vertical-aligner pour les navigateurs modernes et le positionnement +% s pour IE.