标签：htm 利用 宽高 css 居中 isp display logs size
最近在项目中遇到不固定宽高的图片要水平垂直居中的情况，发现垂直居中存在兼容性问题，下面收集了一些方法，可根据需要权衡使用。
1. 背景法(兼容性好，简单，但不利于动态导入的图片)
html：
<div class="wrap"></div>
css：
.wrap{ width:300px; height:200px; background: url(../img/test.jpg) center center no-repeat; }
2. 图片外面用个p标签，通过设置line-height使图片垂直居中(兼容性较好)
html：
<div class="wrap"> <img src="./img/test.jpg"> </div>
css：
.wrap{ width: 300px; height: 300px; border: 1px solid #000; text-align: center; } .wrap p{ width: 300px; height: 300px; line-height: 300px; } .wrap p img{ *margin-top:expression((300 - this.height )/2); vertical-align: middle; }
3. 利用display:table-cell(不兼容IE6、7)
html：
<div class="wrap"> <img src="./img/test.jpg"> </div>
css：
.wrap{ width: 300px; height: 200px; border: 1px dashed #ccc; display: table-cell; vertical-align: middle; text-align: center; }
4. 添加table标签(兼容性好，但是冗余标签比较多)
html：
<div class="wrap"> <table> <tr> <td align="center"><img src="./img/test.jpg"/></td> </tr> </table> </div>
css：
.wrap{ width: 300px; height: 200px; border: 1px dashed #ccc; text-align: center; } .wrap table{ width: 300px; height: 200px; }
标签：htm 利用 宽高 css 居中 isp display logs size
原文地址：http://www.cnblogs.com/sapho/p/6295893.html
