未知尺寸元素（包括块元素）的垂直居中方法探究

#CSS2 2008-10-06

先说一些（未知尺寸元素）垂直居中的思路：

我们一般会设置height=line-height来使一行内文字(及inline元素)可以垂直居中，那能不能推而广之呢？遗憾，单纯设置外层height=line-height使image等可置换元素垂直居中，在ie6下是行不通的。见小结line-height和vertical-align, image等可置换元素尚且不行，更别提div等块级元素了。
利用display的一个属性：table-cell。其实这个方法用来支持垂直居中，那是舍我其谁啊，可惜的是ie8以下的浏览器并不支持display:table-cell;
我们可以看一下：

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .wrap { width:800px; height:500px; display:table-cell; vertical-align:middle; /* 注意，此属性只应用于dislay:inlne/table元素 */ text-align:center; background:#eee; } .container{ display:inline-block; border:1px solid #aaa; } </style> </head> <body> <div class="wrap"> <div class="container"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /> <br />文字<br />文字<br /> </div> </div> </body> </html>

我们发现以上代码在ie6，ie7之下并不能完成我们的要求。

下面，在我们的新方法中，我们得引入一个空标签。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .wrap { width:800px; height:500px; text-align:center; background:#eee; } .container { display:inline-block; vertical-align:middle; border:1px solid #aaa; } .edge { width:0; height:100%; display:inline-block; vertical-align:middle; } </style> </head> <body> <div class="wrap"> <span class="container">  <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /> <div>hello</div> </span> <span class="edge"></span>  </div> </body> </html>

这种方法在 http://www.deviantart.com 网站上很早就应用了。不过，人家针对firefox,opera等支持table-cell的浏览器使用display:table-cell;
而只对ie6,7这两个异类使用了空标签来达到效果。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .wrap { width:300px; height:300px; text-align:center; background:#eee; display:table-cell; vertical-align:middle; } .container { *display:inline-block; vertical-align:middle; } .edge { display:noen; *display:inline-block; vertical-align:middle; width:0; height:100%; } </style> </head> <body> <div class="wrap"> <span class="container"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /> <div style='word-wrap:break-word'>hellohellohellohellohellohellohellohellohellohellohellohelloellohello</div> </span> <span class="edge"></span> </div> </body> </html>