html vertical-align:middle垂直居中 的方法

 今天我在用vertical-align：middle让图片居中发现无论怎么样的无法垂直居中，所以我感觉很奇怪。大家肯定会选择用line-height：center这个做吧。行高对文字效果很好但是对图片居中效果不好需要你自己慢慢去配对。

因为vertical-align：middle用的比较少。去网上搜了搜答案。但是网上有一些贴出了代码却讲解不详细。所以我这篇文章是对自己遇到问题的总结，也希望能帮助到大家。

 方法：

在使用vertical-align：middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

vertical-align：middle的使用方法有点奇怪它不会在它的父级元素里面居中，单独设置是没有效果的。

所以必须在父级元素元素里面给vertical-align：middle设置一个兄弟元素，然后兄弟元素的高度设置为父级元素的100%，对了同样需要给兄弟元素也加上vertical-align：middle。

这个参照物有了。最后使用vertical-align：middle 让元素垂直于参照物（兄弟元素）。下面给了代码让大家清楚的理解。

 代码图

       

效果图

                              

后面大家注意一下我使用的参照物标签为span当然大家也可以使用其他标签进行设置。效果图上面的红色柱子（参照物）是为了让大家好理解加上去的红色。