图片真正居中的方法

方法一 (xhtml 1.0 transitional)：
该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，ie6/ie7还得使用定位。
html结构部分：
<div id=box>??? <span><img src=images/demo.jpg alt=></span></div>?css样式部分：
<style type=text/css>#box{width:500px;height:400px;display:table;text-align:center;border:1px solid #d3d3d3;background:#fff;}#box span{display:table-cell;vertical-align:middle;}#box img{border:1px solid #ccc;}</style><!--[if lte ie 7]><style type=text/css>#box{position:relative;overflow:hidden;}#box span{position:absolute;left:50%;top:50%;}#box img{position:relative;left:-50%;top:-50%;}</style><![endif]-->?方法二 (xhtml 1.0 transitional)：
方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的css hack。
css样式部分：
<style type=text/css>#box{width:500px;height:400px;overflow:hidden;position:relative;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box span{position:static;*position:absolute; /*针对ie6/7的hack*/top:50%; /*针对ie6/7的hack*/}#box img {position:static;*position:relative; /*针对ie6/7的hack*/top:-50%;left:-50%; /*针对ie6/7的hack*/border:1px solid #ccc;}</style>?该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在ie8下设置边框也无效。
方法三 (xhtml 1.0 strict)：
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，ie6/ie7是利用在img标签的前面插入一对空标签的办法。
html结构部分：
<div id=box><i></i><img src=images/demo.jpg alt=></div>?css样式部分：
<style type=text/css>#box{width:500px;height:400px;display:table-cell;text-align:center;vertical-align:middle;border:1px solid #d3d3d3;background:#fff;}#box img{border:1px solid #ccc;}</style><!--[if ie]><style type=text/css>#box i {??? display:inline-block;??? height:100%;??? vertical-align:middle??? }#box img {??? vertical-align:middle??? }</style><![endif]-->

网页设计中的色彩比例
电商网站的内容怎么优化
响应式网站比普通的网站相比有哪些特点
上海网站建设的本土化定位策略
研究表明将近200万个云计算数据库服务器由于配置错误可能导致数据泄露
怎么样让搜索引擎大量收录网站的文章
旅游网站开发方案
网际协议版本（Internet Protocol version，IPv），又称互联网通信协议，是网际协议开发过程中公共协议