方法一
.demo1 { width:180px; height:180px; line-height:180px; *font-size:160px;border:1px solid #ddd; text-align:center;}.demo1 img { vertical-align:middle;}
方法二
.demo2 { width:180px; height:180px; display:table-cell; vertical-align:middle; *font-size:160px; border:1px solid #ddd; text-align:center;}.demo2 img { vertical-align:middle;}
方法三
.demo3 { display:table; position:relative; text-align:center;height:180px; width:180px; border:1px solid #ddd;}.demo3_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}.demo3_inner img { position:relative; top:-50%; left:-50%;}.demo3 >/**/ .demo3_inner { position:static;}.demo3 >/**/ .demo3_inner > img { position:static;}
如果要放文字
如果是文本,需要添加一标签来实现，我这里添加的是p。
.demo4 { display:table; position:relative; text-align:center;height:180px; width:180px; border:1px solid #ddd;}.demo4_inner { display:table-cell; vertical-align:middle; position:absolute; top:50%;}.demo4_inner p { position:relative; top:-50%; left:-50%;}.demo4 >/**/ .demo4_inner { position:static;}.demo4 >/**/ .demo4_inner > p { position:static;}
我测试过的且兼容的浏览器有：IE6+,Opera,Firefox,Safari,chrome，希望各位朋友帮忙测试其他浏览器。