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