CSS Image pos middle in dynamic proportionally height/width div - html

Question

Need to solve this little task:
Center vertically and horizontally IMAGE in DIV.
DIV height must be proportional to width.
DIV width is stretchable (for example 50% of parent div).
IMAGE width and height = auto (it must fill div if its width or height > than div width or height, and have primary size if its < div size, and stay proportional).
I know how to make 2 and 3.
HTML:
<div class="container">
<img src="img.png"/>
</div>
CSS:
.container {
width: 100%;
height: 0;
padding-bottom: 100%;
}
But how to center and middle IMAGE in this DIV?
There is a lot of ways to make 1 task with non proportional and non strechable div.
But I dont know how to make it all in full house of tasks.
Can you help? HTML and CSS may be any.

Answer 1

Did you try :
.container img {
vertical-align : middle
}
? It will verticaly align your image.

Answer 2

Try this:
<style>
.container
{
width :100%;
height :100%;
display :table;
}
.child
{
vertical-align :middle;
display :table-cell;
}
.child img
{
display :block;
width :50%;
margin :0 auto;
}
</style>
<div class="container">
<div class="child">
<img src="img.png"/>
</div>
</div>

Answer 3

Solved it by myself. Check here: http://jsfiddle.net/42trk8ux/17/
HTML:
<div class="width-50">
<div class="parent">
<div class="aspect"></div>
<div class="block">
<div class="tbl">
<div class="tbl-cell">
<img src="img.jpg"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.width-50{
width:50%
}
.parent{
position: relative;
}
.aspect
{
width: 100%;
height: 0;
padding-bottom: 100%;
box-sizing: border-box;
}
.block{
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: block;
}
.tbl{
display: table;
width: 100%;
height: 100%;
position: absolute;
}
.tbl-cell{
display: table-cell;
vertical-align: middle;
text-align: center;
background: #aaa;
}
.tbl-cell img{
max-width:100%;
max-height:100%;
}