Centering hyperlink containing an image - css

Question

I have run into a problem that seems rather dull but I can't seem to solve it. I have the following HTML which I cannot change:
<a href="#" class="aligncenter">
<img src="http://placehold.it/240x150" alt="">
</a>
The width of the image is not known in advance. The CSS I initially used was
a {
display: block;
margin: 20px auto;
border: 1px solid #D5D5D5;
padding: 2px;
display: block;
}
img {
display: block;
}
Note that I can't set text-align: center on the parent of a!
Sometimes the image is as large as the wrapper (in the fiddle below that's body) and then there's no problem. However, sometimes the image is smaller than the wrapping element in which case there'll be white space that fills up the empty space. See this fiddle.
A possible solution is positioning the link right-from-center with a margin-left (using percentual values from the parent) and then reprositioning it with translate(using percentual values of the element). See this fiddle. However, this can't be used in IE8.
margin-left: 50%;
transform: translateX(-50%);
Is there an easier/better solution that I am overlooking that should be able to handle this behaviour cross-browser? I am also interested in hearing ideas that are not restricted to IE8-compatibility. (For instance flex boxes, with which I am not experienced.)

Answer 1

Try like this: Demo
img {
display: block;
margin: 0px auto;
}
Edit: Updated Demo
So according to your requirement i changed like this:
css:
a img {
display: block;
margin:0 auto;
}

Answer 2

If you move the border to the img tag, set the a width to 100% and then set automatic margins on the img, the image should align in the middle.
body {
width: 320px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
}
a {
display: inline;
margin: 20px auto;
display: inline-block;
}
img {
display: block;
border: 1px solid #D5D5D5;
padding: 2px;
margin: 0 auto;
}
<a href="#" class="aligncenter">
<img src="http://placehold.it/240x150" alt="">
</a>