首页 > 网络编程 > CSS/HTML > 经验交流 > css 图片垂直居中 css支持标准的图片垂直居中 2008-08-09 20:45:53 作者： 符合标准，多浏览器兼容的图片垂直居中效果代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <style type="text/css"> <!-- body { margin:0;padding:0 } div { width:500px; height:500px; line-height:500px; border:1px solid #ccc; overflow:hidden; position:relative; text-align:center; margin:auto } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px; vertical-align:middle } p:after { content:".";font-size:1px; visibility:hidden } --> </style> <div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:完美实现CSS垂直居中的11种方法实现css文字垂直居中的8种方法JS+CSS设置img在DIV中只显示Img垂直居中的部分js+CSS 图片等比缩小并垂直居中实现代码CSS List Grid Layout 图片垂直居中用css实现图片垂直居中的使用技巧css实现文字垂直居中的代码CSS解决未知高度垂直居中的问题CSS解决未知高度垂直居中mysql-connector-java.jar包的下载过程详解
