在苦逼的前端领域，相信许多CSS新手都遇到过图片垂直居中的问题，今天我们就来分享一种实现图片垂直居中的CSS方法。
话不多说，先直接贴上代码：
div{border:1pxsolid#ccc;height:500px;width:500px;text-align:center;background:#ccc;}
img{vertical-align:middle;max-width:100%;max-height:100%;}
divspan{height:100%;width:0;overflow:hidden;display:inline-block;vertical-align:middle;}
没错，CSS和HTML居然都用到了span，这是为什么呢？
实际上span的作用是为img撑开行距空间，img是一个比较特殊的非块级标签，不会自己撑起上下行距空间，图片本身的尺寸只能限制图片，上下居中必须有其它标签(span)为它撑开一定垂直空间，它的垂直属性vertical-align:middle才能起作用。
