centering image with vertical-align:middle in CSS not working

[vkams]

first time user of the site. Im having an issue with vertically centering an image. I've searched all over the web for different answers but couldnt find any. I've tried using vertical-align: middle; but it doesnt work. It centers horizontally, but not vertically. heres the div with the image (which is a slideshow). Thanks in advance!\[code\]<div id="photo"> <img src="http://stackoverflow.com/questions/13814159/lax.jpg" name="slide" width="70%" height="70%"> <script type="text/javascript"> var step=1 function slideit(){ document.images.slide.src=http://stackoverflow.com/questions/13814159/eval("image"+step+".src") if(step<3) step++ else step=1 setTimeout("slideit()",2500) } slideit() </script> </div>\[/code\]and the css\[code\]#photo{position:absolute;top:15%;height:80%;width: 70%;left:20%;background:#3377ff;overflow:hidden;\[/code\]}\[code\]img{vertical-align:middle;display: table-cell; margin-left: auto; margin-right: auto;}\[/code\]