一个图片在容器内，水平垂直居中的效果。
效果原理：
利用veryical-align:middle，让img可以位于span的中间对齐。
而左右居中的话，由于img是特殊内嵌元素，所以它是受到text-align:center的控制的。
实现代码如下所示：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片在容器内，水平垂直居中</title> <style> .box{width:600px;height:400px;border:1px solid #000; text-align:center;} span{display:inline-block;height:100%;vertical-align:middle;} img{vertical-align:middle;} </style> </head> <body> <div class="box"> <img src="" alt=""/> <span></span> </div> </body> </html>