text-align:center设置为文本或img标签等一些内联对象(或与之类似的元素)的居中。
margin:0 auto是设置块元素(或与之类似的元素)的居中。
像表格元素的文字居中用text-align:center,表格整体居中用margin:0 auto,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>magin和text-align居中的区别</title>
<style>
.text
{
width: 600px;
height: 400px;
text-align: center;/*文本居中 */
margin: 0 auto;/* 表格居中 */
}
</style>
</head>
<body>
<table border="1" class="text">
<caption ><strong>宠物信息表</strong></caption>
<thead>
<tr>
<th>年纪</th>
<th>宠物名</th>
<th>所属宠物公司</th>
<th>公母</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">四岁</td>
<td>cat</td>
<td>CAT</td>
<td rowspan="2">公</td>
</tr>
<tr>
<td>dog</td>
<td>DOG</td>
</tr>
<tr>
<td>pig</td>
<td>PIG</td>
<td rowspan="2">母</td>
</tr>
<tr>
<td>parrot</td>
<td>BIRD</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="3">健康,无疾病</td>
</tr>
</tfoot>
</table>
</body>
</html>
页面显示:
值得一提的是margin属性;贴两个链接是介绍margin的: