HTML表格栏位内文字水平置中与垂直置中可以用到不同的技巧，传统的HTML 表格设计属性中，就有对于栏位内元素的水平置中与垂直置中的功能，分别是align与valign这两个功能，新一代的网页设计还有CSS的属性可以做到相同的效果，分别用到text-align以及vertical-align来处理，本篇就把传统的HTML写法以及新的CSS写法分享给各位读者，请直接看范例吧！
范例一、用传统的HTML align与valign属性
呈现结果
范例一先用传统的HTML 表格 align以及valign来设计水平与垂直方向的置中效果，其中align='center'是水平置中，valign="middle"则是垂直置中，这两个功能都要写在表格栏位的<td>标签内才有效果。传统的HTML语法虽然简单，但未来还不确定是否会继续获得浏览器的支援，所以建议还是以CSS来设计会比较妥当，请看范例二的语法
范例二、用CSS的text-align
呈现结果
范例二的程式码有两个红色标注的地方，第一个是在表格<table>标签内的「style=" text-align:center"」，这意思是表格栏位内容的元素全部都预设为水平置中，垂直置中的设定在表格栏位<td>标签内的「vertical-align:middle」，眼尖的读者可能会发现有一个栏位并未设定垂直置中，那是用来比较给各位看，其实现在的新版浏览器几乎都会将文字预设为垂直置中，省去网页设计师的麻烦。
文字垂直居中的有如下的方法
方法一：valign:middle
代码如下：
<table><tbody>
<tr>
<td valign="middle">垂直居中</td>
</tr>
</tbody>
</table>
方法二：style="display:table-cell vertical-align:middle"
代码如下：
<table><tbody>
<tr>
<td style="display:table-cell vertical-align:middle">垂直居中</td>
</tr>
</tbody>
</table>
方法三：style="height：20px/*高度根据实际情况设置*/ line-height:22px/*根据实际情况设置到达垂直居中即可*/"
<table><tbody>
<tr>
<td style="height：20px/*高度根据实际情况设置*/ line-height:22px/*根据实际情况设置到达垂直居中即可*/">垂直居中</td>
</tr>
</tbody>
</table>
做法如下： 1.为表格(<table>标签)设置一个具体的宽度
2.添加一个属性 margin: 0 auto
具体代码如下：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<title>Hello, HTML5</title>
<style>
/* 在此处填写叠层样式 */
body, html{
height: 100%
width: 100%
margin: 0 padding: 0
}
table {
height: 80%
width: 80% /* 必须设置一个宽度， margin: 0 auto才能使之居于父组件中央*/
margin: 10px auto /* 通过设置外边距（margin）中的左右外边距属性为auto使之居于父组件（body）中间*/
}
table tr{
height: 40px
width: 100%
background-color: red
}
table>tr>td{
height: 100% width: 33.3%
background-color: red
}
</style>
<script>
/* 在此处填写JavaScript代码 */
</script>
</head>
<body>
<table>
<tr>
<td>12</td>
<td>12</td>
<td>12</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- 在此处编写HTML页面 -->
</body>
</html>
