如何把表放在页面的中心使用CSS?

我正在使用下面的代码。 如何把这个表格在页面的中心使用CSS?

<html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>The Main Page</title> </head> <body> <table> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html> 

 html, body { width: 100%; } table { margin: 0 auto; } 

示例JSFiddle

垂直alignment块元素不是最简单的事情。 下面的一些方法。

  • 了解垂直alignment,或“如何(不)垂直居中内容”
  • 在CSS中垂直居中

你可以尝试使用下面的CSS:

 table { margin: 0px auto; }​ 
 <html> <head> <meta charset="ISO-8859-1"> <style type="text/css"> table.center { margin-left: auto; margin-right: auto; } </style> <title>Table with css</title> </head> <body> <table class="center"> <tr> <th>SNO</th> <th>Address</th> </tr> <tr> <td>1</td> <td>yazali</td> </tr> </table> </body> </html> 

1)在CSS中将水平alignment设置为自动

margin-left: auto; margin-right: auto;

2)垂直alignment到页面中心添加以下到CSS

html, body { width: 100%; }

例如 :

 <html> <head> <meta charset="ISO-8859-1"> <style type="text/css"> table.center { margin-left: auto; margin-right: auto; } html, body { width: 100%; } </style> <title>Table with css</title> </head> <body> <table class="center"> <tr> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> <td><button class="lightSquare"></button></td> <td><button class="darkSquare"></button></td> </tr> </table> </body> </html> 

如果你在哪里询问表格要完成中心,就像中心的一些东西一样,你可以应用下面的代码。

 margin: 0px auto; margin-top: 13%; 

在CSS这个代码将让你像浮动你的表。 告诉我,如果它可以帮助你。

简单地把它放在div中,然后控制div div css:

 <div class="your_position"> <table> </table> </div>