
css设置表格垂直居中的方法示例:
方法一:在外面嵌套一层table,用table中的td来控制居中
<form id="form1" method="post">
<table border=1px cellpadding=0 cellspacing=0 style="width:50height:50quot;>
<tr>
<td style="width:100" align="center" valign="middle">
<table style="background-color:lightskyblue; margin:auto">
<tr>
<td></td>
<td > 居中 </td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</form>效果图:

方法二:将表格放在div标签中通过为div设置css样式display:table-cell实现垂直居中。
HTML代码:
<div><table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table></div>css代码:
div{ border:5px solid red;
width: 200px; height: 200px;
display: table-cell;
vertical-align: middle;}
table {
border=1px ;
width: 100px; height: 100px;
}效果图:

以上就是css表格垂直居中怎么设置?的详细内容,更多请关注易知道|edz.cc其它相关文章!














