标签：style blog http color io os 使用 ar strong
图片在容器中垂直居中，有几种方式：
1、放在table里 （最简单直接的方法）
<table style="height:200px;border:1px solid #000;"> <tr> <td> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </td> </tr> </table>
2、加一个0宽度、100%高度的图片。并且两张图都设为：vertical-align:middle
<div style="height:200px;border:1px solid #000;"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="vertical-align:middle;"/> <img src="" style="height:100%;width:0px;vertical-align:middle;"/><!-- 这里加一个0宽度、100%高度的图片 --> </div>
3、单个图片水平垂直居中 一淘使用方案
<style type="text/css"> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/ /* *font-family:Arial;防止非utf-8引起的hack失效问题，如gbk编码*/ width:200px; height:200px; border: 1px solid #000; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style> <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div>
4、在图片和容器高度，都是已知的情况下，计算margin-top （不推荐）
下图是容器高度200px，如片高度95px
<div style="height:200px;border:1px solid #000;"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" style="margin-top:52.5px;"/> </div>
标签：style blog http color io os 使用 ar strong
原文地址：http://www.cnblogs.com/qq21270/p/3992475.html
