居中圖像與垂直對齊：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; 
}