全面总结使用CSS实现水平垂直居中效果的方法(3)

方法四：div
使用div模拟表格效果，也就是说将多个<div>的“display”属性设置为禾“table”和“table-cell”，并设置他们的“vertical-align”的属性值为“middle”。
HTML Code

XML/HTML Code复制内容到剪贴板

<div id="container">  

 <div id="content">content</div>  

</div>  

CSS Code

CSS Code复制内容到剪贴板

#container {   

 height: 300px;   

 display: table;/*让元素以表格形式渲染*/  

}   

#content {   

 display:table-cell;/*让元素以表格的单元素格形式渲染*/  

 vertical-align: middle;/*使用元素的垂直对齐*/  

}     

优点：

这种方法不会像前面的两种方法一样，有高度的限制，此方法可以要据元素内容动态的改变高度，从而也就没有空间的限制，元素的内容不会因为没足够的空间而被切断或者出现难看的滚动条。

缺点：

不足之处呢？这种方法只适合现代浏览器，在IE6-7下无法正常运行；而且较前两者而言，结构也更复杂。

（编辑：ASP站长网）