记录一下:浏览器
采用 inline-block 方法:spa
HTML:博客
<div id="box">it
<div id="content">我是内容<br />我也是内容</div> class
<i class="_actor"></i>兼容性
</div>原理
CSS:hack
#box { height: 400px; background: #c00;}方法
#content { display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}兼容
#content { font-size: 12px; color: #fff;}
._actor { width:0; font-size:0; height: 100%; display: inline-block; *display: inline; *zoom:1; vertical-align: middle;}
加粗体的部分是关键所在。
原理是:都显示为行框的高度由最高的行内框决定。
i._actor做为演员,高度指定和父元素一致。
兼容性:支持inline-block的浏览器都可。
对于IE6/7,能够先使用hack方式使其支持 inline-block后,使用此方法实现垂直居中。
来源:张鑫旭的博客