css表格垂直居中怎么设置？

css设置表格垂直居中的方法示例：

方法一：在外面嵌套一层table，用table中的td来控制居中

<form id="form1" method="post">
        <table border=1px cellpadding=0 cellspacing=0 style="width:50% ;height:50%">
            <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表格垂直居中怎么设置？的详细内容，更多请关注0133技术站其它相关文章！