Auto vertical align any auto sized image - css

Question

I can't find an answer that is not on a fixed image size so I'm going to ask it.
I have a div with an image in it and that picture could be any size. I need it to auto scale AND auto align. I can scale it fine but vertically aligning it is a bit of a challenge. I need it to be center vertically aligned.
HTML + CSS
<div id="myDiv">
<img src="./img/example.png"></img>
</div>
#myDiv {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
text-align: center;
}
#myDiv img {
height: auto;
width: auto;
max-height: 70%;
max-width: 70%
}

Answer 1

This example forces both horizontal and vertical alignment of an image inside a box; in this specific case, constrained to 130x130px. Change the width and height defined as 130px in 2 separate places each in the css to change the constrained size.
[edit: added simplified example showing minimum required setup]
Simplified example:
html:
<div class="pic">
<img src="/path/to/pic.jpg"/>
</div>
css:
.pic {
display: inline-block;
width: 130px;
height: 130px;
outline: solid 1px #cccce3;
font-size: 0;
text-align: center;
}
.pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.pic img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}
Complete example:
Original codepen showing more complex example: http://codepen.io/anon/pen/culvD .
Here's the html:
<ul class="pics">
<li>
<div class="pic">
<img src="/path/to/pic1.jpg"/>
</div>
</li>
<li>
<div class="pic">
<img src="/path/to/pic2.jpg"/>
</div>
</li>
</ul>
and here's the css:
ul.pics {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.pics li {
display: inline-block;
width: 130px;
margin: 4px;
padding: 6px;
background-color: #e6e6ec;
outline: solid 1px #cccce3;
}
ul.pics li .pic {
height: 130px;
font-size: 0;
text-align: center;
}
ul.pics li .pic:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
ul.pics li img {
max-width: 130px;
max-height: 130px;
display: inline-block;
vertical-align: middle;
}

Answer 2

to center align an element to the center asign it a width, then margin-left and right to auto.