表格 , 垂直居中问题

1、基本结构

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表尾</td>
        </tr>
    </tfoot>
</table>

2、特点

1. 表头显示方式display: table 效果: 垂直水平居中
2. 单元格显示方式dispaly: table-cell 效果 : 垂直居中

3. 常用属性

table
-- border: <integer>：表格外框及单元格外框
-- cellpadding: <integer>：单元格的内边距
-- cellspacing: <integer>：单元格之间的间距，最小为0
-- rules：rows、cols、groups、all：边框规则

td
-- rowspan: <integer>：行合并(该单元格占多行)
-- colspan: <integer>：列合并(该单元格占多列)
-- width: : <integer>%：列宽占比 : 每列宽度加起来不用等于100% , 按比例分配的

caption
-- align: left | right | top | bottom：标题方位

3、垂直水平居中

在特点中看出display: table-cell;可以实现垂直居中

.sup {
    width: 200px;
    height: 200px;
    /*父集通过显示方式控制子集垂直居中,需以下两步合用*/
    display: table-cell;
    vertical-align: middle;/*设置垂直排列方式*/
}
.sub {
    width: 100px;
    height: 100px;
    margin: 0 auto;/*子集自己实现水平居中*/
}