css - 使用垂直对齐居中图像：CSS 中的中间不起作用

Question

网站的第一次用户。我在垂直居中图像时遇到问题。我在网上搜索了不同的答案，但找不到任何答案。我试过使用垂直对齐：中间；但它不起作用。它水平居中，但不是垂直居中。

继承人的 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 中添加内容

  #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;
 }