如何使用 CSS 将表格放在页面的中心？答案

【问题标题】：How to put table in the center of the page using CSS?如何使用 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>

【问题讨论】：

许多其他问题的重复，例如stackoverflow.com/questions/2281087/center-a-div-in-css
水平居中？垂直居中？两者都有？
水平和垂直
Vertically align div (no tables)的可能重复

标签： html css html-table center

【解决方案1】：

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

例如JSFiddle

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

【讨论】：

嘿，但这只是水平居中而不是垂直居中。另外，margin: 0 auto 是什么？
@CodeBlue - 然后看这个：stackoverflow.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>

【讨论】：