[分享]css中 表格怎么上下居中

在CSS中，表格是经常使用的元素之一，但是很多时候我们会发现，表格的内容不是很美观，行与行之间的距离有时候过大，导致页面显示效果不够美观。那么，如何让表格上下居中呢？下面就来一一介绍一下方法。 1.使...

在CSS中，表格是经常使用的元素之一，但是很多时候我们会发现，表格的内容不是很美观，行与行之间的距离有时候过大，导致页面显示效果不够美观。那么，如何让表格上下居中呢？下面就来一一介绍一下方法。
1.使用vertical-align属性
在表格中，我们可以通过vertical-align属性来控制单元格内容的垂直对齐方式。其中，有以下几种可选值：
- top:将单元格内容顶端对齐 - middle:将单元格内容在垂直方向居中对齐 - bottom:将单元格内容底端对齐
代码演示：

<pre>
table{
    border-collapse:collapse;
    border-spacing:0;
    margin:auto;
}
td{
    border:1px solid #ddd;
    padding:10px;
    vertical-align:middle; /* 居中对齐 */
} 

2.使用line-height属性
除了vertical-align属性，我们还可以使用line-height属性来让单元格内容居中对齐。我们可以将单元格内容的高度设置为与行高相等，就能实现垂直方向的居中对齐。
代码演示：

<pre>
table{
    border-collapse:collapse;
    border-spacing:0;
    margin:auto;
}
td{
    border:1px solid #ddd;
    padding:10px;
    line-height:50px; /* 行高 */
} 

3.使用table-cell方式
如果我们想让整行内容都居中对齐，可以将单元格样式修改为display:table-cell，然后在行元素上设置vertical-align:middle，就可以实现整行内容的居中对齐。
代码演示：

<pre>
table{
    border-collapse:collapse;
    border-spacing:0;
    margin:auto;
}
tr{
    display:table;
    width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    border-spacing:0;
}
td{
    display:table-cell;
    border:1px solid #ddd;
    padding:10px;
    vertical-align:middle; /* 行居中 */
} 

总结
通过以上三种方式，我们可以轻松让表格内容上下居中，提升页面的美观度。在实际开发中，我们可以根据需求选择不同的方式来实现。同时，为了保证页面结构的清晰，我们还需注意排版和样式的规范，养成良好的 CSS 书写习惯。