La domanda è certamente stata fatta, ma non trovo una soluzione adatta al mio caso.

la mia situazione è questa:

codice:
#container {width:100%; height:100%; line-height:100%; background:#f00; overflow:hidden;}

#image {margin:0; height:100%; line-height:100%; background:#00f;}
	#img {height:100%; background:#ccc; text-align:center;}
	#imgs {max-width:100%; max-height:100%; margin: 0 auto; vertical-align: middle; text-align:center;}

#social {float:right; width:300px; height:100%; background:#ff0;}


<div id="container">

	<div id="social">
		social
	</div>	

	<div id="image">
		
		<div id="img">
			[img][/img]
		</div>
		
	</div>
	
</div>
Con questa soluzione, ottengo il dimensionamento dell'immagine alle dimensioni richieste se l'immagine è maggiore, e la centro in orizzontale.

Come posso fare per centrarla in verticale?

Ho provato con display: table-cell; al div img e display:table; al div image, ma poi non mi funziona e non so perché il max-height:100% e l'immagine se più alta crea un scroll che non voglio.

che mi potete dire?

le dimensioni del container e dell'html e del body sono tutte al 100% perché la finestra si apre in un layer al 95% della finestra del browser, per cui non so prima quanto devono essere.

ma non è li il problema, il problema che non risolvo è il centrare l'immagine in verticale.

grazie in anticipo.