Question

我想将表格对齐到页面的中间（水平和垂直）。不是单元格中的文本，而是整个表格。

不幸的是，我只能将其水平对齐到中心，而不能垂直对齐。

提前谢谢！

Answer 1

您可以看看显示flex或grid。

如果桌子独自站立，则代码可以减少到很少

示例：grid

html {
  min-height:100%;
  display:grid;
}
body {
  margin:auto;
}
table,td {
  border:solid
}

<table>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

或flex

html {
  min-height:100%;
  display:flex;
}
body {
  margin:auto;
}
table,td {
  border:solid
}

<table>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

对于较旧的浏览器，您也可以将table-layout与height和width结合使用。 https://colintoh.com/blog/display-table-anti-hero

html {
  height:100%;
  width:100%;
  display:table
}
body {
  display:table-cell;
  vertical-align:middle;
}
table,td {
  border:solid;
  margin:auto;
}

<table>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
  <tr>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
    <td>td</td>
  </tr>
</table>

要做的是将高度设置为至少等于视口，以使元素垂直居中。

如果您的桌子并不孤单，请告诉我们，还有其他方法

Answer 2

尝试一下

HTML：

<table class="box" border="1px">
    <tr>
        <td>
           Content
        </td>
    </tr>
</table>

CSS：

.box {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:fixed;
    margin-left:-150px; /* half of width */
    margin-top:-150px;  /* half of height */
    top:50%;
    left:50%;
}

Answer 3

您可以使用此代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>fk8.ir</title>
    <style>
        .table-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        table {
            border-collapse: collapse;
            box-shadow: #888 0 0 10px 0;
        }

        th,
        td {
            padding: 10px;
        }

        th {
            background-color: #f41574;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="table-container">
        <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Website</th>
            </tr>
            <tr>
                <td>Farid</td>
                <td>Karami</td>
                <td>fk8.ir</td>
            </tr>
        </table>
    </div>
</body>
</html>

将表格与页面中间对齐

3 个答案: