Question

我正在尝试使用flexbox属性使表格垂直居中，但不会居中。

我尝试使用容器/儿童的高度，但是问题仍然存在。我还尝试了其他垂直居中方法，例如display: table;的{{1}} / display:table-cell或positioning的父级，而relative的子级绝对值为top: 50% ,left: 50%;

.tableWrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

table {
  width: 65%;
  table-layout: fixed;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  border: 1px solid #dddddd;
  word-wrap: break-word;
}

td,
th {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

table ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

<!DOCTYPE html>
<html>

<head>
  <style>
  </style>
</head>

<body>
  <main>

    <div class="tableWrap">

      <table>
        <tr>
          <th>Title</th>
        </tr>
        <tr>
          <td>Test0:</td>
        </tr>

        <tr>
          <td>Test1</td>
        </tr>
        <tr>
          <td>Test2:</td>
        </tr>

        <tr>
          <td>
            <ul>
              <li>Test3.</li>
            </ul>
          </td>
        </tr>
      </table>

    </div>

  </main>
</body>

</html>

Answer 1

问题在于正文，html和.tableWrap的高度。它们会自动降低高度。根据您的情况，解决方案是：

html,
body,
main,
.tableWrap{
  height: 100%;
}

桌子不会使用flexbox垂直居中

1 个答案: