如何使用 CSS 将表格放在页面的中心？
Posted
技术标签:
【中文标题】如何使用 CSS 将表格放在页面的中心？【英文标题】：How to put table in the center of the page using CSS? 【发布时间】：2012-03-13 06:09:33 【问题描述】：我正在使用以下代码。如何使用 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>
【问题讨论】：
许多其他问题的重复，例如***.com/questions/2281087/center-a-div-in-css 水平居中？垂直居中？两者都有？ 水平和垂直 Vertically align div (no tables)的可能重复 【参考方案1】：html, body
width: 100%;
table
margin: 0 auto;
例如JSFiddle
垂直对齐块元素并不是最简单的事情。下面的一些方法。
Understanding vertical-align, or "How (Not) To Vertically Center Content" Vertical Centering in CSS【讨论】：
嘿，但这只是水平居中而不是垂直居中。另外，margin: 0 auto 是什么？ @CodeBlue - 然后看这个：***.com/questions/1909753/…【参考方案2】：您可以尝试使用以下 CSS：
table
margin: 0 auto;
【讨论】：
删除px可以节省一些带宽。【参考方案3】：
1) 在 CSS 中将水平对齐设置为自动
margin-left: auto;
margin-right: auto;
2) 垂直对齐到页面中心添加以下到 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>
【讨论】：
由于 HTML4 和 HTML5 冲突而陷入同样的境地，alignment="centre" 在 HTML5 中是绝对的。【参考方案4】：
<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>
【讨论】：
【参考方案5】：如果您在哪里询问表格以完成中心，例如完全中心的某些东西。， 您可以应用以下代码。
margin: 0px auto;
margin-top: 13%;
css 中的这段代码可以让您的表格像浮动一样。 告诉我它是否对你有帮助。
【讨论】：
【参考方案6】：你可以使用“display: flex;”。
body
margin: 0;
height: 100vh;
width: 100vw;
display: flex; /* WIDTH and HEIGHT are required*/
justify-content: center;
align-items: center;
<!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>Table</title>
</head>
<body>
<table border>
<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>【讨论】：
【参考方案7】：只需将其放在 div 中，然后使用 css 控制该 div：
<div class="your_position">
<table>
</table>
</div>
【讨论】：
以上是关于如何使用 CSS 将表格放在页面的中心？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 HTML 和 CSS 将菜单放在页面的整个宽度上？