DIV CSS 佈局教程網

要實現盒模型中的div居中，可以使用display:table-cell方法且兼容多浏覽器，下面有個示例，感興趣的朋友可以練練手 ie7和IE6都不能識別 display: table-cell;（但是支持display: block等CSS1的屬性！）
IE8以及以後版本可以識別！

ie7和IE6能識別vertical-align:middle;

如果盒模型中間只有幾段文字的話，設置line-height就可以實現居中顯示了！

如果要實現盒模型中的div居中，可以參考以下代碼：
CSS Code復制內容到剪貼板

1. div#wrap {
2. display: table;
3. border: 1px solid #FF0099;
4. background-color: #FFCCFF;
5. width: 760px;
6. height: 400px;
7. *position: relative;
8. overflow: hidden;
9. }
11. div#subwrap {
12. vertical-align: middle;
13. display: table-cell;
14. *position: absolute;
15. *top: 50%;
16. }
18. div#content {
19. *position: relative;
20. *top: -50%;
21. }

效果：


這個是多浏覽器兼容的，但是得寫幾層div~ 但是想在層或img在層中垂直水平居中該怎樣做呢？下一篇會涉及到。