不确定尺寸图片及多行文字实现垂直居中和水平居中

本方法思路源自淘宝UED博客,略做改动,同时拓展到多行文字的垂直居中

css代码:

.box {
    width: 400px; 
    height: 400px; 
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #eee; 
    /* hack for ie */ 
    *float: left;
    *display: block;
    *font-size: 350px; 
    /* end */ 
} 
.box img { 
    *vertical-align: middle; 
}
.box span {
    *vertical-align: middle;
    font-size: 12px;
    line-height: 16px;
}

html代码:

<div class="box"> 
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> 
</div>
<div class="box">
    <span>我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进,我爱北京天安门,天安门上太阳升,伟大领袖毛主席,指引我们向前进</span>
</div>

效果图:

图片垂直居中

注:

  1. 由于在高级浏览器下按display:table-cell;解析,所以外层div会以行级标签展示,所以在ie hack中添加*float:left;以在IE中实现相同效果
  2. 其中在IE下以font-size做为hack方式,其中height与*font-size的比为8/7,约等于1.14
  3. 针对多行文字垂直居中需要为内标签定义font-sizeline-height属性