自動調整表格中的外部單元格？

Question

您好我想打它從我希望把中間的一個內部大div結構的一個網頁，我想讓它變得中心，以便它看起來像一個margin:0 auto但有table。

我不是很確定我應該怎麼解釋，但這裏是我想要的表格看起來像一個例證：

我想知道是否我應該使用Javascript或是否存在與CSS

Answer 1

方式

最簡單的方法是運用一個規律，一拉：

/* find the 2nd (middle) cell in the 2nd (middle) row */ 
.table .row:nth-child(2) .cell:nth-child(2){ 
    text-align:center; 
} 
/* find the div in this cell and align it */ 
.table .row:nth-child(2) .cell:nth-child(2) div{ 
    margin: 0 auto; 
    width:200px; /* example */ 
} 

凡.table，.row和.cell是適當的位置Y你正在使用。

另外...如果你使用這個頁面佈局，下面的代碼如何處理，它有一個頁眉，頁腳和居中，拉伸內容，不需要表格，所以應該在傳統瀏覽器中工作。

Demo Fiddle

HTML

<section> 
    <article></article> 
    <header></header> 
    <footer></footer> 
</section> 

CSS

html, body { 
    height:100%; 
    margin:0; 
    padding:0; 
    width:100%; 
} 
header, footer, article { 
    position:absolute; 
    width:100%; 
} 
header { 
    height:100px; 
    background:red; 
    top:0; 
} 
footer { 
    height:90px; 
    bottom:0; 
    background:green; 
} 
section { 
    position:relative; 
    height:100%; 
    background:grey; 
    text-align:center; 
    width:100%; 
} 
article { 
    padding-top:100px; 
    padding-bottom:90px; 
    margin:0; 
    width:500px; 
    background:blue; 
    margin:0 auto; 
    position:relative; 
    height:100%; 
    box-sizing:border-box; 
}