css实现图片水平居中对齐

css中设置line-height等于height可以使单行文本垂直居中，这是经常用到的样式。
效果如下：
未设置之前：

设置之后，好看了很多。

但是加入图片后发现不能居中对齐

查阅资料发现，img是行内元素，默认的情况是图片顶对齐，即图片和文字的底基线对齐。添加vertical-align：middle，可以使img的基线相对于该元素所在行的基线的垂直对齐方式为居中对齐。