如何让图片垂直居中

如何让图片垂直居中？这是一个常见的需求。网上看了一圈，收录一下最佳实践。来自百度知道。

原理是利用vertical-align来实现垂直，绝对行高的是由行内最高的元素的值。

HTML代码：

<div><span></span><img src="1.jpg" alt="test image"/></div>

HTML中空元素<span></span>很重要，据说是为了解决旧浏览器兼容性。

CSS代码属性设置：

1. 设置DIV 属性: 重点是text-align属性设为center.同时需要设置宽和高

   div{
     width:600px;
     height:600px;
     border:1px solid red;
     text-align:center;
   }

2. 设置span属性: 重点设置vertical-align为middle

   span{
     vertical-align:middle;
     display: inline-block;
     height:100%;
   }

3. 设置img属性:重点设置vertical-align为middle

   img{
        width:300px;
        height:300px;
        vertical-align:middle;
   }