html图片自动居中div,纯CSS实现任意图片在div中垂直居中

在苦逼的前端领域，相信许多CSS新手都遇到过图片垂直居中的问题，今天我们就来分享一种实现图片垂直居中的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; }

没错，CSS和HTML居然都用到了span，这是为什么呢？

实际上span的作用是为img撑开行距空间，img是一个比较特殊的非块级标签，不会自己撑起上下行距空间，图片本身的尺寸只能限制图片，上下居中必须有其它标签(span)为它撑开一定垂直空间，它的垂直属性vertical-align:middle才能起作用。