CSS原生table屬性讓多個div等高與垂直居中

woff

　　身旁有許多從事網頁設計的朋友，時常問到梅干一個問題，就是早期用table排版時，完全不用考慮td等高的問題，但當改用div進行排版時，就會遇到，二個或多個div時，就會各自依內容長高，且也無法垂直居中，這應該是許多人的困擾，而之前為了讓二個div等高，梅干還特別用了jQuery，來抓div的最大值，將要等高的div值動態寫入，其實會這麼麻煩，一切都是因為IE6.0的緣故，由於IE對於CSS支援度差，使得一下這不行用，那不行用的，把一件簡單的事變的很麻煩。

　　其實在CSS2中，就有一個table的顯示屬性可用，將div直接模擬成table來使用，就可實現多個div等高外，還可讓div內的元件垂直居中，完全不用寫任何的程式碼，就可作到等高與居中的問題，隨著IE6.0已漸漸的消失後，再加上IE8.0、IE9.0已成為目前的主流後，終於在這些的版本中，支援了table屬性，因此現在就可放心的使用，這個table屬性，輕鬆實現多個div等高與垂直居中的美夢啦！

---

css-table 屬性：

1. display:table => table

複製代碼

---

多個div等高：css：

1. /* table */
   
2. .table {  
   
3.   display: table;
   
4.   border-collapse: collapse;
   
5. }  
   
6. 
   
7. /* tr */
   
8. .row{
   
9.         display: table-row; border:solid 1px red;
   
10. }
    
11. 
    
12. /* td , th */
    
13. .cell1 {  
    
14.   display: table-cell;
    
15.   width: 180px;
    
16.   border-right: 1px dotted #fff;
    
17.   background:#fcd6d6;
    
18. }  
    
19. 
    
20. .cell2 {  
    
21.   display: table-cell;
    
22.   width: 180px;
    
23.   padding-left: 10px;
    
24.   border-right: 1px dotted #fff;
    
25.   background:#eff8ff;
    
26. }  
    
27. 
    
28. .cell3 {  
    
29.   display: table-cell;
    
30.   width: 180px;
    
31.   padding-left: 10px;
    
32.   background:#effff0;
    
33. }

複製代碼

html

1. </blockquote></div>html：<div class="blockcode"><blockquote><div class="table"><!-- table -->
   
2.          <div class="row"><!-- tr -->
   
3.          <div class="cell1"><!-- td -->  
   
4.             table-cell內容1<br />
   
5.             table-cell內容1<br />
   
6.             table-cell內容1<br />
   
7.             table-cell內容1<br /><br />      
   
8.          </div>
   
9.          <div class="cell2">
   
10.                table-cell內容2<br>
    
11.                table-cell內容2
    
12.          </div>
    
13.          <div class="cell3">
    
14.                table-cell內容3
    
15.          </div>
    
16.      </div>   
    
17. </div>

複製代碼

結果預覽：

---

垂直居中：css：

---

html

CSS

1. .table-wrap {display:table; width:300px; height:300px; border:solid 1px #ccc; }
   
2. .table-cell {display:table-cell; vertical-align:middle; text-align:center;}

複製代碼

html

1. <div class="table-wrap">
   
2.     <div class="table-cell">
   
3.         <div class="content">
   
4.            內容置中
   
5.         </div>
   
6.     </div>
   
7. </div>

複製代碼

---

結果預覽：