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的作用要大于拉伸效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容