经常会使用background-position:left center，将背景图片垂直居中。浏览器渲染页面的最小单位是像素，所以某些情况下即使定义了“center”，实际效果也未必是垂直居中。
例如：
- 元素：高16px；
- 背景图片：高13px；
- 定义background-position:left center
实际效果如下图：
可以清晰的看到背景图片距上边框“2px”，距下边框“1px”。上图是在Chrome下测试结果，其它浏览器也是如此，只不过是有的距上边框“1px”，距下边框“2px”。
解决方案
若想实现100%垂直居中，则“元素高度 - 背景图片高度”可以被2整除，所以上例可以将元素高度设置为“17px”，或将背景图片高度更改为“12px”。
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/805.html
