居中图像与垂直对齐：CSS中的不工作

Question

该网站的第一次使用者。我有一个垂直居中图像的问题。我在网上搜索了不同的答案，但没有找到任何答案。我试过使用vertical-align：middle;但它不起作用。它水平居中，但不垂直居中。

继承人与图像的div（这是一个幻灯片）。提前致谢！

<div id="photo"> 

       <img src="lax.jpg" name="slide" width="70%" height="70%"> 

       <script type="text/javascript"> 

       var step=1 
       function slideit(){ 
       document.images.slide.src=eval("image"+step+".src") 
       if(step<3) 
       step++ 
       else 
       step=1 
       setTimeout("slideit()",2500) 
       } 
       slideit() 

       </script> 
      </div> 

和CSS

#photo{ 
position:absolute; 
top:15%; 
height:80%; 
width: 70%; 
left:20%; 
background:#3377ff; 
overflow:hidden; 

}

img{ 
vertical-align:middle; 
display: table-cell; 
margin-left: auto; 
margin-right: auto; 
} 

Answer 1

试图删除这个

img{ 
vertical-align:middle; 
display: table-cell; 
margin-left: auto; 
margin-right: auto; 
} 

，并在你的DIV

0123新增内容

#photo{ 
    position:absolute; 
    top:15%; 
    height:80%; 
    width: 70%; 
    left:20%; 
    background:#3377ff; 
    overflow:hidden; 
    vertical-align:middle; 
    display: table-cell; 
    margin-left: auto; 
    margin-right: auto; 
}