[分享]css中如何设置表格居中显示

CSS中如何设置表格居中显示表格在网页设计中经常用到，而设置表格的水平居中或垂直居中显示问题是前端开发人员经常遇到的一件事情。在CSS中，我们可以使用textalign属性和margin属性实现表格的...

CSS中如何设置表格居中显示
表格在网页设计中经常用到，而设置表格的水平居中或垂直居中显示问题是前端开发人员经常遇到的一件事情。在CSS中，我们可以使用text-align属性和margin属性实现表格的居中。
1. 水平居中显示
要使表格水平居中显示，我们可以在包含表格的元素上使用text-align属性，将其值设置为center。如下面的代码所示：

html
<p style="text-align: center;">
	<table>
		<tr>
			<td>表格内容1</td>
			<td>表格内容2</td>
		</tr>
		<tr>
			<td>表格内容3</td>
			<td>表格内容4</td>
		</tr>
	</table>
</p> 

其中，p标签的text-align属性被设置为center，实现了表格的水平居中显示。
2. 垂直居中显示
如果要实现表格的垂直居中显示，我们可以使用margin属性。将包含表格的元素设置一个固定的高度和宽度，并设置上下左右的margin属性为auto，这样就可以实现表格的垂直居中显示了。

html
<div style="height: 300px; width: 500px; margin: auto;">
	<table>
		<tr>
			<td>表格内容1</td>
			<td>表格内容2</td>
		</tr>
		<tr>
			<td>表格内容3</td>
			<td>表格内容4</td>
		</tr>
	</table>
</div> 

其中，div元素的高度和宽度被设置为300px和500px，margin属性被设置为auto。表格就可以在这个div元素的中央垂直居中显示。
综上，使用text-align和margin属性可以实现表格的水平和垂直居中显示。