CSS完成未知宽高的图片水平、垂直居中代码

　　使用纯CSS完成未知宽高的图片水平、垂直居中效果，兼容性非常不错的代码，烈火小编测试了IE8及火狐，都可以正常使用，在Div区块内，图片是未知宽高。不论使用何种尺寸的图片，它都会居中于DIV中，虽然代码有点多，但是兼容性方面做的挺好。

　　演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>CSS实现图片水平垂直、居中于DIV</title><br /> <style><br /> h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd{padding:0;margin:0;}<br /> li{list-style:none;}<br /> img{border:none;}<br /> u{text-decoration:none;}<br /> em{font-style:normal;}<br /> a{color:#0064B1;text-decoration:none;outline:none;blr:expression(this.onFocus=this.blur());}<br /> a:hover{color:#ff6700;text-decoration:underline;}<br /> body{font-size:12px;color:#444;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;}<br /> .clear{height:0;overflow:hidden;clear:both;}<br /> h1{font:bold 18px microsoft yahei; color:#ff6700;margin-bottom:20px;}<br /> h2{ position:absolute;top:12px;right:20px;}<br /> h2 a{ text-indent:-9999px; background:url(/images/logo.gif) no-repeat; height:55px;width:130px; display:block;}<br /> </style><br /> <style type="text/css"><br /> /*For <b>Firefox</b> <b>Chrome</b>*/<br /> .demo{border:1px #ddd solid;width:308px;height:248px;overflow:hidden;text-align:center;display:table;float:left;margin:50px;position:relative;}<br /> .demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}<br /> .demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}<br /> *+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}<br /> *+html .demo a img{position:relative;top:-50%;left:-50%;}<br /> *html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}<br /> *html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?"200px":"atuo");height:expression(this.height>140?"140px":"atuo");}<br /> </style><br /> </head><br /> <body><br /> <h1>图片水平垂直居中</h1><br /> <div class="demo"><a href="#"><img src="/uploads/common/images/s_p1.jpg" /></a></div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

CSS完成未知宽高的图片水平、垂直居中代码

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

CSS完成未知宽高的图片水平、垂直居中代码

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀