<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{margin-top: 50px;height: 400px;line-height: 400px;text-align: center;background-color: #A2A590;}div img{vertical-align: middle;}</style></head><body><div><img src="styles/images/xlf.jpg" alt="logo" /></div></body></html>
这段代码中xlf.jpg是一个200*200的图片，以下为输出结果：
看上去是不是居中显示了？其实并不是，大家将div的高度设置小一点看看：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{margin-top: 50px;height: 210px;line-height: 210px;text-align: center;background-color: #A2A590;}div img{vertical-align: middle;}</style></head><body><div><img src="styles/images/xlf.jpg" alt="logo" /></div></body></html>
是不是可以看出来图片明显没有居中？
那么这是为什么呢？
在css权威指南中是这么说的：
vertical-align:middle这个值通常适合于图像，因为它使元素的纵向的中点对齐本行的“中间”。行的中间定义为基线以上半个ex处的那个点，而ex的值源于父元素的字体尺寸。在实际应用中，因为大多数用户代理将1ex等同于0.5em，middle将会是元素的纵向重点与父元素基线以上四分之一em处的一个点对齐。
要理解这里首先要清楚基线和ex的概念。基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。而ex则指的是小写字母“x”的高度。那么结合下图来看：
不难看出ex与字体大小相关，而且基线上0.5ex处并不是中线的所在，因而会产生之前的偏差。大家可以通过增大字体来验证这个猜想是否正确：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{margin-top: 50px;height: 210px;line-height: 210px;font-size: 80px;text-align: center;background-color: #A2A590;}div img{vertical-align: middle;}</style></head><body><div><img src="styles/images/xlf.jpg" alt="logo" /></div></body></html>
发生了明显的偏差。
所以解决这个小bug的方法就是设置字体大小为0。如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{margin-top: 50px;height: 210px;line-height: 210px;font-size: 0;text-align: center;background-color: #A2A590;}div img{vertical-align: middle;}</style></head><body><div><img src="styles/images/xlf.jpg" alt="logo" /></div></body></html>
结果如图：
如果觉得《vertical-align使图片垂直居中的小细节 – CSS – 前端 手机网页css样式》对你有帮助，请点赞、收藏，并留下你的观点哦！
