Vertically align an image inside a div with responsive height

Question

I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).

Answer 1

Make another div and add both 'dummy' and 'img-container' inside the div

Do HTML and CSS like follows

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}

    

		
Sample
		

			Image tag
		
	
	

Instead of 100% for the 'responsive-container' you can give the height that you want.,