css实现图片水平垂直居中

(1).vertical-algin与line-height结合

图一

效果如下：

图二

div中是存在着我们看不到的空白节点，我们可以把它想象成一个字母a，这个字母根据我们写的css属性将会水平垂直居中显示，而同时我们设置图片的vertical-algin:middle，图片将会与字母a的中线对齐，而当文字font-size为0的时候，此时文字的中线也就完全居中，此时就是严格意义上的居中显示了（文字font-size不为0时，它的中线与设置的字体有关）。

(2).position:absolute和margin负值

代码如下：

图三

效果如图二所示。

弊端：必须知道图片的宽度和高度。

(3).模拟表格table-cell

图四

效果如图二所示。

相当于模拟表格的td标签。

(4).position拉伸

图五

效果如下:

图六

如上所示，当块状元素尺寸确定，被拉伸，同时margin：auto的时候，此时，图片就可以达到居中效果，兼容性IE8+。absolute和width同时存在的时候，width的作用要大于拉伸效果。