Come centrare l'immagine con una dimensione sconosciuta all'interno di div?

Question

Così, ho il div con questi parametri:

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

Esso contiene l'immagine con dimensioni sconosciute (la dimensione è dinamica e può essere diverso).

Ho bisogno di allineare l'immagine verticalmente e orizzontalmente.

prega, aiutare

Answer 1

Il metodo immagine di sfondo lavorerà, con background-position: Centro, purtroppo si perde il controllo del ridimensionamento dell'immagine.

È possibile impostare l'immagine come segue:

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

PS. Tieni presente che questo sarà centrato rispetto al più vicino posizionato genitore.

Answer 2

Il modo più semplice cross-browser potrebbe essere quella di impostare l'immagine dinamica come una proprietà di sfondo sul #container:

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

Answer 3

Aggiungere il seguente:

I primi due le linee si centrano verticalmente, l'ultima orizzontalmente.

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

maggiori informazioni si possono trovare qui: http://www.w3.org/Style/Examples/007/center

Answer 4

Ciò centrare verticalmente e orizzontalmente.

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

http://jsfiddle.net/nfBDT/

Answer 5

Credo che il modo più semplice è quello di fare questo:

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

regolare .container per soddisfare il vostro div (non so se il vostro è stato una classe o un ID)

oh non ho letto tutto della tua domanda.

questo sembra funzionare:

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

pieno credito: http://www.brunildo.org/test/img_center.html

Answer 6

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

Questo è un esempio abbastanza decente. Solitamente si utilizza la tabella/allineamento verticale per i browser moderni e il posizionamento +% s per IE.