Easily Center an Image in a Div

Who would have thought that this would be such a headache? After lots of reading on the web about how some browsers don't support this property and other browsers doesn't support that property I came up with a very simple solution that works perfectly for me in  IE8, Firefox and Chrome. The solution is to create a table with one tr and one td inside the div. Then make the table the same size as the div by setting the width and height of the table to 100%. Then simply set the text-align:center style on the td.

<div>
  <table width="100%" height="100%">
  <tr><td style="text-align:center"><img src="apple.jpg"></img></td></tr>
  </table>
</div>

Enjoy. Let me know if there is any issues with this solution.