自动调整表格中的外部单元格？

Question

我想制作一个页面，该页面由一个包含9个单元格（3行3列）的表格构成。我想在中间放一个大div，我希望它居中，所以它看起来像margin:0 auto但是有一张桌子。

我不太清楚我应该如何解释，但这里是我希望表格看起来像的例子：

我想知道我是否应该使用Javascript或者是否有使用CSS的方式？

Answer 1

简单的方法是应用规则，la：

 /* 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是您正在使用的相应课程。

或者......如果你将它用于页面布局，那么下面的内容如何，​​它有一个页眉，页脚和居中，拉伸内容，不需要表格，所以应该在旧版浏览器中使用。

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;
}